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

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

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

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

{{data.Name}
价格：{{value}编号：'1.2-5'}
{{data.LastValue}编号：'1.2-8'}
{{data.High}编号：'1.2-8'}

在每个单元格中都有

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

{{data.Name}

---

这可能会起作用，但取决于用于显示此数据的内容，例如ng引导或ngx引导或类似内容，或其他库，或非角度的内容。

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

{{data.Name}
价格：{{value}编号：'1.2-5'}
{{data.LastValue}编号：'1.2-8'}
{{data.High}编号：'1.2-8'}

---

这里有更多详细信息：

我做了一些更改，现在可以使用了：

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

{{data.Name}
价格：{{value}编号：'1.2-5'}
{{data.LastValue}编号：'1.2-8'}
{{data.High}编号：'1.2-8'}

我正按照您的建议进行尝试，但出现以下错误：错误：模板分析错误：无法绑定到“target”，因为它不是“button”的已知属性。（“ti=index”>]data target=“#{{i}”它显示了我想要的详细信息，但我想在单击按钮时展开一个新的div数据时折叠与按钮关联的其他div数据。我如何才能做到这一点？我尝试过引导accordion，但没有帮助。@Subasismondal data parent可能会帮到你！请参阅：我也尝试过这个，但得到以下错误：错误：模板解析错误：无法绑定到“数据目标”，因为它不是“按钮”的已知属性（“ti=index”>][数据目标]=“'#demo'+data.uniqueId”