在上一篇博文《Angular6.x---進入用戶編輯》中,我們分享了{{屬性名稱}}和[(ngModel)]這兩個表達式的運用,我們已經可以將表單裏的修改與我們展示出來的值進行同步,今天我們來學習在Angular6.x中如何展示一個列表.
在項目裏,列表展示可以說是非常普遍的一個需求了,幾乎有展示數據需求的地方都需要一個列表展示與一個詳情展示.當然我們的數據一般都是從服務器端獲取的,而今天呢,爲了節約時間,我這裏直接新建一個數組,然後在user.component.ts裏引入,並給Users創建一個數組屬性,之後直接開始在user.component.html裏展示,數組代碼如下方左圖所示,引入代碼如下方右圖所示:
在Angular6.x中展示一個數組或列表需要用到ngFor,這個有點兒類似於java中的foreach循環.完整的語法是ngFor=”let object of list” ,然後他會自動的在我們標記了*ngFor語法的標籤上執行循環操作.
一般來說,在列表中選中一條數據時,我們往往希望展示出這條數據的詳細信息,那麼此時就分爲兩步,首先我們需要給標籤綁定一個單擊事件,其次我們需要將選中的對象傳遞給我們需要展示詳情信息的那個模塊.
在上一篇博文中,我們已經知道,{{屬性名稱}}可以將我們在users.component.ts裏定義的屬性給顯示出來,所以我們想要顯示用戶的詳情,只需要將選中的對象賦值給我們在users.component.ts裏定義的那個模型屬性裏即可.給標籤綁定單擊事件及傳值代碼如下圖所示,賦值代碼如下圖2所示,(當然因爲屬性由user變爲了selectUser,所以我們上一次頁面中展示的user也要改爲selectUser):
圖1
圖2
此時,如果我們直接啓動,會發現程序沒有按照預期的進行顯示,打開web開發者工具,我們會發現控制檯有打印錯誤信息:”_co.selectUser is undefined”.如下圖所示:
這是因爲我們首次加載的時候,並沒有選中用戶,所以我們在詳情裏綁定的selectUser也就成爲了未定義的對象.爲了避免這個錯誤,我們要對其進行判斷,如果用戶存在,則顯示,如果不存在,則不顯示,Angular也考慮到了這種需求,於是提供了*ngIf這個關鍵詞,我們正好可以使用這個關鍵詞.代碼如圖所示
今天的博文就以修改後的效果圖結束,第一次加載,如左圖所示,選中某一個用戶後的效果如右圖所示:
