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

helloworldcoding 發布于2019-08-19 10:59 / 2439人閱讀

摘要：初探用戶列表與用戶詳情在上一篇博文進入用戶編輯中我們分享了屬性名稱和這兩個表達式的運用我們已經可以將表單里的修改與我們展示出來的值進行同步今天我們來學習在中如何展示一個列表在項目里列表展示可以說是非常普遍的一個需求了幾乎有展示數

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

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

　　在Angular6.x中展示一個數組或列表需要用到ngFor,這個有點兒類似于java中的foreach循環.完整的語法是ngFor=”letobjectoflist”,然后他會自動的在我們標記了*ngFor語法的標簽上執行循環操作.

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

　　在上一篇博文中,我們已經知道,{{屬性名稱}}可以將我們在users.component.ts里定義的屬性給顯示出來,所以我們想要顯示用戶的詳情,只需要將選中的對象賦值給我們在users.component.ts里定義的那個模型屬性里即可.給標簽綁定單擊事件及傳值代碼如下圖所示,賦值代碼如下圖2所示,(當然因為屬性由user變為了selectUser,所以我們上一次頁面中展示的user也要改為selectUser):

　　圖1

　　圖2

　　此時,如果我們直接啟動,會發現程序沒有按照預期的進行顯示,打開web開發者工具,我們會發現控制臺有打印錯誤信息:”_co.selectUserisundefined”.如下圖所示:

　　這是因為我們首次加載的時候,并沒有選中用戶,所以我們在詳情里綁定的selectUser也就成為了未定義的對象.為了避免這個錯誤,我們要對其進行判斷,如果用戶存在,則顯示,如果不存在,則不顯示,Angular也考慮到了這種需求,于是提供了*ngIf這個關鍵詞,我們正好可以使用這個關鍵詞.代碼如圖所示

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

GPU云服務器云服務器用戶列表 Windows用戶列表 linux用戶列表當前在線用戶列表

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/76789.html

初探Angular6.x---主從組件

摘要：在上一篇博文用戶列表與詳情展示中我們用實現了用戶列表的展示并通過語法實現了列表單擊時將單擊的對象傳到后臺的功能最后為了防止初次加載對象為空導致的錯誤我們又使用了語法來對要展示的詳情對象進行判空操作但隨著后續模塊的增多以及業務的交叉我們　　　在上一篇博文《Angular6.x---用戶列表與詳情展示》中,我們用ngFor=let object of list實現了用戶列表的展示,并通過...

FingerLiu 2019-08-19 11:06 評論0 收藏0
Django搭建個人博客：View視圖初探

摘要：比如，在一個博客應用中，你可能會創建如下幾個視圖博客首頁展示最近的幾項內容。這些需求都靠視圖來完成。首先寫一個最簡單的視圖函數，在瀏覽器中打印出字符串。調用函數時會返回一個含字符串的對象。換句話說，的作用是將映射到視圖中。 Django 中的視圖的概念是「一類具有相同功能和模板的網頁的集合」。比如，在一個博客應用中，你可能會創建如下幾個視圖：博客首頁：展示最近的幾項內容。內容詳情...

Turbo 2019-07-30 17:51 評論0 收藏0
前后端完全分離之 API 設計

摘要：刪除后指定產品不存在獲取商品列表未分頁獲取全部商品成功系列的表殼材料為輕巧的銀色及深空灰色陽極氧化鋁金屬，強化玻璃材質為顯示屏提供保護。外觀設計不再棱角分明，表層玻璃邊有一個弧度向下延伸，與陽極氧化鋁金屬機身邊框銜接。背景 API 就是開發者使用的界面。我的目標不僅是能用，而且好用，跨平臺（PC, Android, IOS, etc...）使用。本文將詳細介紹 API 的設計及異常處...

gitmilk 2019-08-21 10:30 評論0 收藏0
前后端完全分離之 API 設計

摘要：刪除后指定產品不存在獲取商品列表未分頁獲取全部商品成功系列的表殼材料為輕巧的銀色及深空灰色陽極氧化鋁金屬，強化玻璃材質為顯示屏提供保護。外觀設計不再棱角分明，表層玻璃邊有一個弧度向下延伸，與陽極氧化鋁金屬機身邊框銜接。背景 API 就是開發者使用的界面。我的目標不僅是能用，而且好用，跨平臺（PC, Android, IOS, etc...）使用。本文將詳細介紹 API 的設計及異常處...

gaara 2019-08-14 12:10 評論0 收藏0
angular(angular6/angular7/angular8) delete請求body的問

摘要：中請求，不接受，只需將其放在對象中即可在，，及以上版本中修改如下在中修改如下這樣請求就可以攜帶 angular中httpclient delete請求，不接受body，只需將其放在options對象中即可在 angular6.x ，angular7.x， angular8.x及以上版本中修改如下: const options = { headers: new HttpHeader...

gggggggbong 2019-08-26 10:49 評論0 收藏0