在按钮单击 Angular 2 上显示详细信息答案

【问题标题】：Showing Details on Button Click Angular 2在按钮单击 Angular 2 上显示详细信息
【发布时间】：2018-06-17 14:33:54
【问题描述】：

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

如何做到这一点？有没有更好的选择？

  <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>

【问题讨论】：

标签： javascript css angular angular-template

【解决方案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

【讨论】：

我正在按照您的建议进行尝试，但出现以下错误：错误：模板解析错误：无法绑定到“目标”，因为它不是“按钮”的已知属性。 ("ti=index">

【解决方案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 或类似的，或其他一些库，或非角度的东西。

【讨论】：

我也试过这个，但出现以下错误：错误：模板解析错误：无法绑定到“数据目标”，因为它不是“按钮”的已知属性。 ("ti=index">

【解决方案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>

【讨论】：