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

helloworldcoding 發(fā)布于2019-08-19 10:59 / 2450人閱讀

摘要：初探用戶列表與用戶詳情在上一篇博文進(jìn)入用戶編輯中我們分享了屬性名稱和這兩個(gè)表達(dá)式的運(yùn)用我們已經(jīng)可以將表單里的修改與我們展示出來的值進(jìn)行同步今天我們來學(xué)習(xí)在中如何展示一個(gè)列表在項(xiàng)目里列表展示可以說是非常普遍的一個(gè)需求了幾乎有展示數(shù)

　　在上一篇博文《Angular6.x---進(jìn)入用戶編輯》中,我們分享了{(lán){屬性名稱}}和[(ngModel)]這兩個(gè)表達(dá)式的運(yùn)用,我們已經(jīng)可以將表單里的修改與我們展示出來的值進(jìn)行同步,今天我們來學(xué)習(xí)在Angular6.x中如何展示一個(gè)列表.

　　在項(xiàng)目里,列表展示可以說是非常普遍的一個(gè)需求了,幾乎有展示數(shù)據(jù)需求的地方都需要一個(gè)列表展示與一個(gè)詳情展示.當(dāng)然我們的數(shù)據(jù)一般都是從服務(wù)器端獲取的,而今天呢,為了節(jié)約時(shí)間,我這里直接新建一個(gè)數(shù)組,然后在user.component.ts里引入,并給Users創(chuàng)建一個(gè)數(shù)組屬性,之后直接開始在user.component.html里展示,數(shù)組代碼如下方左圖所示,引入代碼如下方右圖所示:

　　在Angular6.x中展示一個(gè)數(shù)組或列表需要用到ngFor,這個(gè)有點(diǎn)兒類似于java中的foreach循環(huán).完整的語法是ngFor=”letobjectoflist”,然后他會(huì)自動(dòng)的在我們標(biāo)記了*ngFor語法的標(biāo)簽上執(zhí)行循環(huán)操作.

　　一般來說,在列表中選中一條數(shù)據(jù)時(shí),我們往往希望展示出這條數(shù)據(jù)的詳細(xì)信息,那么此時(shí)就分為兩步,首先我們需要給標(biāo)簽綁定一個(gè)單擊事件,其次我們需要將選中的對(duì)象傳遞給我們需要展示詳情信息的那個(gè)模塊.

　　在上一篇博文中,我們已經(jīng)知道,{{屬性名稱}}可以將我們?cè)趗sers.component.ts里定義的屬性給顯示出來,所以我們想要顯示用戶的詳情,只需要將選中的對(duì)象賦值給我們?cè)趗sers.component.ts里定義的那個(gè)模型屬性里即可.給標(biāo)簽綁定單擊事件及傳值代碼如下圖所示,賦值代碼如下圖2所示,(當(dāng)然因?yàn)閷傩杂蓇ser變?yōu)榱藄electUser,所以我們上一次頁面中展示的user也要改為selectUser):

　　圖1

　　圖2

　　此時(shí),如果我們直接啟動(dòng),會(huì)發(fā)現(xiàn)程序沒有按照預(yù)期的進(jìn)行顯示,打開web開發(fā)者工具,我們會(huì)發(fā)現(xiàn)控制臺(tái)有打印錯(cuò)誤信息:”_co.selectUserisundefined”.如下圖所示:

　　這是因?yàn)槲覀兪状渭虞d的時(shí)候,并沒有選中用戶,所以我們?cè)谠斍槔锝壎ǖ膕electUser也就成為了未定義的對(duì)象.為了避免這個(gè)錯(cuò)誤,我們要對(duì)其進(jìn)行判斷,如果用戶存在,則顯示,如果不存在,則不顯示,Angular也考慮到了這種需求,于是提供了*ngIf這個(gè)關(guān)鍵詞,我們正好可以使用這個(gè)關(guān)鍵詞.代碼如圖所示

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