ngFor 隐藏取消隐藏细节答案

【问题标题】：ngFor hide unhide detailsngFor 隐藏取消隐藏细节
【发布时间】：2016-06-23 17:55:51
【问题描述】：

我有以下 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>

【问题讨论】：

到目前为止你尝试了什么？

标签： javascript html angular

【解决方案1】：

有一个单独的数组来保存当前状态：

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>

【讨论】：

【解决方案2】：

试试下面的 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>

【讨论】：

【解决方案3】：

使用 *ngIf 实现点击功能，返回当前人物。然后你可以做到这一点。在这个div 中，您可以添加您想要隐藏的字段

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

你可以找到完整的答案和例子here

【讨论】：