javascript - 在 ngFor 中显示特定的 Div

原文 标签 javascript angular

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

我创建了一个初始状态为 display: none 的 div .我考虑过使用ngStyle绑定(bind)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;
}

最佳答案

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

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

客服

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>

关于javascript - 在 ngFor 中显示特定的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55855206/

相关文章:

javascript - 如何使AJAX加载div顶部的页面

javascript - Google翻译器导致导航链接失败

javascript - 输入(类型 ="search")十字图标的 Angular 事件绑定(bind)?

javascript - 尝试通过URL访问时,Angular 2动态路由不起作用

javascript - 无法通过单个按钮触发angularJS中的提交

javascript - 为 Javascript 开放 XML SDK

javascript - 在 reactjs 的函数参数中使用参数和变量

maven - Spring Boot、maven、AngularJS 2、 typescript 和实时重新加载

javascript - 如何将对象放入另一个对象Angular/Javascript

jQuery 未在 bootstrap-sass 中定义