ngFor隱藏取消隱藏細節

Question

我有以下的JSON數組

users= [ 
     {'name':'cliff' 
     'age':'44' 
     'bloodtype':'A' 
     'hobby':'Golf' 
     }, 
     {'name':'andy' 
     'age':'30' 
     'bloodtype':'b' 
     'hobby':'running' 
     }] 

，我必須通過所有用戶提供瞭如下的代碼，就會陷入循環，顯示其詳細

<div *ngFor='let user of users > 
    <div>Name:{{user.name}}</div> 
    <div>Age:{{user.age}}</div> 
    <div>BloodType:{{user.bloodtype}}</div> 
    <div>Hobby:{{user.hobby}}</div> 
    <a href="#">More</a> 
</div> 

我想要做的是在所有用戶初始加載時隱藏「血型」，「愛好」字段，並在點擊「更多」鏈接時取消隱藏個人用戶詳細信息。我怎樣才能做到這一點？

我曾嘗試以下，但點擊「更多」鏈接將取消隱藏所有用戶的詳細信息

<div *ngFor='let user of users > 
    <div>Name:{{user.name}}</div> 
    <div>Age:{{user.age}}</div> 
    <div [hidden]=isHidden> 
     <div>BloodType:{{user.bloodtype}}</div> 
     <div>Hobby:{{user.hobby}}</div> 
    <div> 
    <a href="#" (click)='isHidden=!isHidden'>More</a> 
</div> 

Answer 1

嘗試用下面ngFor：

<div *ngFor="let user of users" > 
    <div>Name:{{user.name}}</div> 
    <div>Age:{{user.age}}</div> 
    <div *ngIf="user.isMore"> 
     <div>BloodType:{{user.bloodtype}}</div> 
     <div>Hobby:{{user.hobby}}</div> 
    </div> 
    <a *ngIf="!user.isMore" (click)="user.isMore = !user.isMore">More</a> 
</div> 

Answer 2

使用* ngIf 實現點擊功能，返回當前人。 然後你可以做到這一點。在此div你可以添加你的領域，你想隱藏

<div *ngIf="currentPerson"> 
    //your info 
</div> 

你可以找到完整的答案，併爲例here

Answer 3

有一個單獨的陣列，其保持當前的狀態：

additionalInfo: Array<boolean> = [ false, false ]; 
users: Array<any> = [ 
    {'name':'cliff' 
    'age':'44' 
    'bloodtype':'A' 
    'hobby':'Golf' 
    }, 
    {'name':'andy' 
    'age':'30' 
    'bloodtype':'b' 
    'hobby':'running' 
    }] 

而且像這樣修改你的HTML模板。在您的*ngFor中添加索引變量，然後在div和錨上添加*ngIf，並添加(click)事件以切換狀態。

<div *ngFor="let user of users; let i=index" > 
    <div>Name:{{user.name}}</div> 
    <div>Age:{{user.age}}</div> 
    <div *ngIf="additionalInfo[i]">BloodType:{{user.bloodtype}}</div> 
    <div *ngIf="additionalInfo[i]">Hobby:{{user.hobby}}</div> 
    <a *ngIf="!additionalInfo[i]" (click)="additionalInfo[i] = true">More</a> 
</div>