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

只需为每个数据更改一个唯一的data-target属性。为此，您可以在“* 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

Answer 2

每个单元格中都有#demo，这是无效的HTML。每页只能有一个唯一的HTML元素ID，浏览器可以容忍您的错误，但它总会返回第一个实例。也许这样的事情会起作用：

 <button id="button" type="button" class="btn btn-info" data-toggle="collapse"
[data-target]="'#demo' + data.uniqueId"
(click)="calculateValue(data.Name,data.value)">{{data.Name}}</button>
<tr [id]="'demo' + data.uniqueId" class="collapse">

这可能有效，但取决于您用于显示此数据的内容，例如ng-bootstrap或ngx-bootstrap或类似的，或其他一些库，或非角度的东西。

Answer 3

我做了一些改动，现在正在运作：

<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" attr.data-target="#demo{{i}}" (click)="calculateValue(data.Name,data.value)">{{data.Name}}</button>
     <tr id="demo{{i}}" class="collapse" id="insidetr">
       Price:{{value | number : '1.2-5'}}
       </tr>
     </td>
     <td>{{data.LastValue | number : '1.2-8'}}</td>
    <td>{{data.High | number : '1.2-8'}} </td>
  </tr>

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

3 个答案: