javascript - 在ngFor中显示特定的Div

原文 标签 javascript angular

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

我创建了一个初始状态为display: none的div。我考虑过在单击时使用ngStyle绑定display: block属性,但是问题是所有div都得到显示,而不仅仅是我需要的特定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;
}

最佳答案

您可以使用@ViewChildren。我给你这个例子:

您的HTML:

<div class="student-container" *ngFor="let s of students; let i = index">
  <span>Name: {{s.name}} - Index: {{i}}</span>
  <div class="student-box" #boxes>
    <span>Hey! I'm opened.</span>
    <span>My Secret Number is: {{s.secretNumber}}</span>
  </div>
  <button (click)="toggleBox(i)">Click Me!</button>
</div>


您的组件:

import { Component, ViewChildren, QueryList, ElementRef } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChildren("boxes") private boxes: QueryList<ElementRef>;

  students = [
    { name: "Peter", secretNumber: "88" },
    { name: "Laura", secretNumber: "45" },
    { name: "Paul", secretNumber: "13" }
  ];

  toggleBox(index) {
    let nativeElement = this.boxes.toArray()[index].nativeElement;
    nativeElement.style.display =
      nativeElement.style.display === "none" || !nativeElement.style.display
        ? "block"
        : "none";
  }
}


您的CSS:

.student-container {
  background: lightblue;
  margin: 10px;
  padding: 10px;
}

.student-box {
  display: none;
}


https://codesandbox.io/s/zwqoxp583x

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

相关文章:

javascript - 如何从子模块访问 angular-redux 存储?

javascript - 需要知道何时监听rxjs的函数收到了答案

angular - 使用 angular 7 在两个同级组件之间进行通信而不使用两者的公共(public)服务的方法

javascript - 为什么变量在引用对象消失后仍然包含数据

javascript - Ajax 不发布大图像的 base64 数据

css - Angular 材排版-定制

javascript - 如何在可点击元素内制作按钮?

javascript - js如何使用自己的新id更改克隆表单中的id

javascript - jQuery中的数据表

java - 多语言字符串的SHA1总和