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>