javascript - 显示按钮单击 Angular 2 的详细信息

Question

我需要在单击按钮下方的每个表数据时显示详细信息。单击按钮时，它显示数据，但不是在特定按钮旁边，而是显示在第一行数据旁边。

如何实现这一目标？还有更好的选择吗？

  <tr *ngFor="let data of datas | search:'Name':query">
     <td> <button id="button" type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" (click)="calculateValue(data.Name,data.value)">{{data.Name}}</button>
     <tr id="demo" class="collapse">
        <td>
            Price:{{value | number : '1.2-5'}}
        </td>
       </tr>
     </td>
     <td>{{data.LastValue | number : '1.2-8'}}</td>
    <td>{{data.High | number : '1.2-8'}} </td>
  </tr>

Answer 1

只需为每个数据更改一个唯一的数据目标属性即可。为此，您可以在“*ngFor”中使用“let i = index”，并在每次迭代中使用它，如下所示:

<tr *ngFor="let data of datas | search:'Name':query; let i = index">
     <td> <button id="button" type="button" class="btn btn-info" data-toggle="collapse" data-target="#{{i}}" (click)="calculateValue(data.Name,data.value)">{{data.Name}}</button>
     <tr id="{{i}}" class="collapse">
        <td>
            Price:{{value | number : '1.2-5'}}
        </td>
       </tr>
     </td>
     <td>{{data.LastValue | number : '1.2-8'}}</td>
    <td>{{data.High | number : '1.2-8'}} </td>
  </tr>

更多详细信息请参见:ngFor with index as value in attribute