初探Angular6.x---用戶列表與用戶詳情

在上一篇博文《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這個關鍵詞,咱們正好可使用這個關鍵詞.代碼如圖所示

今天的博文就以修改後的效果圖結束,第一次加載,如左圖所示,選中某一個用戶後的效果如右圖所示: