在按鈕單擊角度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

只需為每個數據更改一個唯一的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，其中索引作為屬性中的值

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>