Angular 4 : 单击一个特定项目

Question

我正在开发一个 table，看起来像这样：

我尝试在单击按钮时打印特定项目的详细信息。但就在我点击一个按钮的那一刻，我显示了所有项目的详细信息。

我正在使用 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

在 *ngFor 中使用 index 值。

变化： *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>

Angular 4 : 单击一个特定项目

Angular 4 : click on one specific item

for-loop

click

angular