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

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

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>

Answer 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>

Answer 3

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

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

您可以找到完整的答案，例如here

ngFor隐藏取消隐藏细节

3 个答案: