Javascript 显示/隐藏ngFOR中的框

我试图显示/隐藏

ngFor

中的框，但出现了一个错误。第一项工作正常，但第二项我得到一个未定义的错误

错误类型错误：无法读取未定义的属性“nativeElement” 在CardComponent.push../src/app/shared/card/card.component.ts.CardComponent.showBox（card.component.ts:78）

主HTML

<div class="col s12 l6 xl4" *ngFor="let student of students | async; let i = index">
   <app-card [student]="student" [i]="i"></app-card>
</div>

<div class="card card-min">
  <div class="card-content no-padding">
    <!-- HEADER -->
    <div class="card-header">
      <div class="col s12 no-padding">
          <div class="card travel-info col s12 no-padding" style="top:0!important; left:0!important; display: none;"
          #travelInfoBox>
          <p>{{ i }}</p>
        </div>
        <div class="col s12 m6 l6 no-padding" (click)="showBox(student.studentID, i)">
          <div class="arr-dep-btn-outline">
            <div class="icon i-outline">
              <i class="material-icons small">flight_land</i>
            </div>
            <div class="txt">
              <p class="arr-dep-flag" *ngIf="!isPast">Arrival</p>
              <p class="arr-dep-flag" *ngIf="isPast">Arrived</p>
              <p class="date-stamp">{{ student.dateArrival | date }}</p>
            </div>
            <div class="chev" *ngIf="!isPast">
              <i class="material-icons small">chevron_right</i>
            </div>
          </div>
        </div>
        <div class="col s12 m6 l6 no-padding" (click)="showBox(student.studentID, i)">
          <div class="arr-dep-btn-outline">
            <div class="icon i-outline">
              <i class="material-icons small">flight_takeoff</i>
            </div>
            <div class="txt">
              <p class="arr-dep-flag" *ngIf="!isPast">Departure</p>
              <p class="arr-dep-flag" *ngIf="isPast">Departured</p>
              <p class="date-stamp">{{ student.dateDeparture | date }}</p>
            </div>
            <div class="chev" *ngIf="!isPast">
              <i class="material-icons small">chevron_right</i>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</div>

html

您还可以包含构建id=travelInfoBox的元素的代码吗？你发布的html中似乎只有一个travelInfoBox，而不是两个。嘿@tcigrand在阅读你的评论后，你触发了一些东西，卡片是循环中重复出现的元素，因此它总是只有一个

#travelInfoBox

。不，这很管用。我现在的问题是，我可以点击第二张卡，一切都会很好，但当我点击第一张卡时，它将不起作用。我将编辑代码，看看您是否可以对此有所启发：）是否可以创建一个复制此问题的示例StackBlitz？代码中有一些缺失的部分，我似乎无法理解。例如，您正在使用路由，但尚未添加路由配置。另外，我不确定您正在使用哪个组件作为卡组件的一部分。还有这类事情。

@ViewChildren('travelInfoBox') travelInfoBox: QueryList<ElementRef>;

showBox(studentID, i) {
    const nel = this.travelInfoBox.toArray();
    const nativeElement = nel[i].nativeElement;
    nativeElement.style.display = nativeElement.style.display === 'none' || !nativeElement.style.display ? 'block' : 'none';
    this.getData(studentID);
}

@ViewChild('travelInfoBox', { read: ElementRef }) private travelInfoBox: ElementRef;

showBox(studentID) {
  const nativeElement = this.travelInfoBox.nativeElement;
  nativeElement.style.display = nativeElement.style.display ? 'block' : 'none';
  this.getData(studentID);
}

<div class="card travel-info col s12 no-padding" style="top:0!important; left:0!important; display: none;" #travelInfoBox>
   <router-outlet></router-outlet>
</div>