Question

我正在处理一个看起来像这样的表：

单击按钮时，我尝试在特定项目上打印详细信息。但是，当我单击按钮上的那一刻时，我会显示所有项目的详细信息。

我正在使用for循环，这就是为什么我有这个问题，我的部分代码在下面：

<div *ngFor="let incident of incidentsHist"> 
   <div class="wrap-table70" *ngIf="this.incident['tableData'][0]['tableDataList'][0]">
    <div class="table-alert">

      <div class="row">

        <div class="cell" data-title="Babylon Ref">  {{this.incident['tableData'][0]['tableDataList'][0]['babylon_ref']}} </div>
        <div class="cell" data-title="Incident Name" > </div>
        <div class="cell" data-title="Alarm Name" > </div> 
        ...
        <div class="cell" data-title="Details" > 
          <button  type="button" class="btn-xs btn-primary active" (click)="details=!details " autofocus ng-model="details" >

                <div *ngIf="!details"> Details </div> 
                <div *ngIf="details"> Close </div>

          </button>
        </div>
      </div>
    </div>
</div>

是否可以仅对一个单击的项目而不是对其他单击的项目进行单击操作？谢谢

Answer 1

您可以使用incident.details隐藏显示详细信息

  <div class="row">

    <div class="cell" data-title="Babylon Ref">  {{this.incident['tableData'][0]['tableDataList'][0]['babylon_ref']}} </div>
    <div class="cell" data-title="Incident Name" > </div>
    <div class="cell" data-title="Alarm Name" > </div> 
    ...
    <div class="cell" data-title="Details" > 
      <button  type="button" class="btn-xs btn-primary active" (click)="incident.details=!incident.details " autofocus>

            <div *ngIf="!incident.details"> Details </div> 
            <div *ngIf="incident.details"> Close </div>

      </button>
    </div>
  </div>
</div>

Answer 2

在index内使用*ngFor值。

更改： *ngFor="let incident of incidentsHist; let i = index"

以下是更新的代码：

<div *ngFor="let incident of incidentsHist; let i = index"> 
   <div class="wrap-table70" *ngIf="this.incident['tableData'][0]['tableDataList'][0]">
    <div class="table-alert">

      <div class="row">

        <div class="cell" data-title="Babylon Ref">  {{this.incident['tableData'][0]['tableDataList'][0]['babylon_ref']}} </div>
        <div class="cell" data-title="Incident Name" > </div>
        <div class="cell" data-title="Alarm Name" > </div> 
        ...
        <div class="cell" data-title="Details" > 
          <button  type="button" class="btn-xs btn-primary active" (click)="details[i]=!details[i]" autofocus>

                <div *ngIf="!details[i]"> Details </div> 
                <div *ngIf="details[i]"> Close </div>

          </button>
        </div>
      </div>
    </div>
</div>

角度4：单击一个特定项目

2 个答案: