在上一篇博文《Angular6.x---進入使用者編輯》中,我們分享了{{屬性名稱}}和[(ngModel)]這兩個表示式的運用,我們已經可以將表單裡的修改與我們展示出來的值進行同步,今天我們來學習在Angular6.x中如何展示一個列表. 在專案裡,列表展示可以說是非常普遍的一個需求了,幾乎有展示資料需求的地方都需要一個列表展示與一個詳情展示.當然我們的資料一般都是從伺服器端獲取的,而今天呢,為了節約時間,我這裡直接新建一個陣列,然後在user.component.ts裡引入,並給Users建立一個陣列屬性,之後直接開始在user.component.html裡展示,陣列程式碼如下方左圖所示,引入程式碼如下方右圖所示:
一般來說,在列表中選中一條資料時,我們往往希望展示出這條資料的詳細資訊,那麼此時就分為兩步,首先我們需要給標籤繫結一個單擊事件,其次我們需要將選中的物件傳遞給我們需要展示詳情資訊的那個模組. 在上一篇博文中,我們已經知道,{{屬性名稱}}可以將我們在users.component.ts裡定義的屬性給顯示出來,所以我們想要顯示使用者的詳情,只需要將選中的物件賦值給我們在users.component.ts裡定義的那個模型屬性裡即可.給標籤繫結單擊事件及傳值程式碼如下圖所示,賦值程式碼如下圖2所示,(當然因為屬性由user變為了selectUser,所以我們上一次頁面中展示的user也要改為selectUser):
這是因為我們首次載入的時候,並沒有選中使用者,所以我們在詳情裡繫結的selectUser也就成為了未定義的物件.為了避免這個錯誤,我們要對其進行判斷,如果使用者存在,則顯示,如果不存在,則不顯示,Angular也考慮到了這種需求,於是提供了*ngIf這個關鍵詞,我們正好可以使用這個關鍵詞.程式碼如圖所示
今天的博文就以修改後的效果圖結束,第一次載入,如左圖所示,選中某一個使用者後的效果如右圖所示:
