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

Posted 2023-02-22

【中文标题】在按钮单击 Angular 2 上显示详细信息

【英文标题】：Showing Details on Button Click 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>

【参考方案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">

]data-target="# i" 它显示了我想要的详细信息，但是我想在单击按钮时展开新的 div 数据时折叠与按钮关联的其他 div 数据。我怎样才能做到这一点？我试过引导手风琴，但没有帮助。 @SUBHASISMONDAL data-parent 可以帮助你！请参阅：***.com/questions/11476670/…

【参考方案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">

][data-target]="' #demo' + data.uniqueId"

【参考方案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="#demoi" (click)="calculateValue(data.Name,data.value)">data.Name</button>
     <tr id="demoi" 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>