时间戳

首页 > 解决方案 > 在 ngFor 中显示特定的 Div

javascript - 在 ngFor 中显示特定的 Div

问题描述

我有一堆卡片使用 ngFor 和用户信息。卡内有一个按钮，将显示该特定用户的旅行信息。

我创建了一个具有初始状态的 div display: none。我考虑过在点击时使用ngStyle绑定display: block属性，但问题是所有的 div 都被显示了，而不仅仅是我需要的特定的。

关于如何做到这一点的任何建议？

html

<div class="col s12 m6 l4" *ngFor="let student of students; let i = index">
   <i class="material-icons" (click)="showBox()">access_alarm</i>

   <div class="travel-info" [ngStyle]="{'display': boxDisplay == true ? 'block' : 'none'}" >
      <app-travel-info ></app-travel-info>
   </div>
</div>

ts

boxDisplay = false;

showBox() {
    this.boxDisplay = true;
}

标签： javascriptangular

解决方案

问题是您只有一个为所有变量设置的变量。

您将希望将 showBox 重构为类似的东西。

TS

this.boxDisplay = this.students.map(s => false);

showBox(index) {
  this.boxDisplay[index] = true;
}

HTML

<div class="col s12 m6 l4" *ngFor="let student of students; let i = index">
   <i class="material-icons" (click)="showBox(i)">access_alarm</i>

   <div class="travel-info" [ngStyle]="{'display': boxDisplay[i] == true ? 'block' : 'none'}" >
      <app-travel-info ></app-travel-info>
   </div>
</div>

如果是我，我会使用 ngIf 而不是 ngStyle。

<div class="col s12 m6 l4" *ngFor="let student of students; let i = index">
   <i class="material-icons" (click)="showBox(i)">access_alarm</i>

   <div class="travel-info" *ngIf="boxDisplay[i]" >
      <app-travel-info ></app-travel-info>
   </div>
</div>

推荐阅读