Question

我有一个表，其中每一行都有一个按钮，点击它会展开并显示一些在我的组件中计算的数据，但问题是按钮点击它保持其他按钮展开并显示所有展开行中的最新计算数据。我希望在扩展特定行时它会折叠其他行。

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

这是我的组成部分：

  calculateValue(market,value){
        var data1 = "data1";
        var data2="data2";
        if (market.includes(data1)) { 
        this.value=this.calculateValue(value);
        }
      }

请建议我该怎么做。提前谢谢。

Answer 1

使用ng-bootstrap模块要容易得多。 https://ng-bootstrap.github.io/#/components/collapse/examples

现在，您的其他行无法知道另一行是否已打开。你需要跟踪你的开放行。

  Private activeRow = -1; //declare this in your component

  calculateValue(market,value, row){
    this.activeRow = row;
    var data1 = "data1";
    var data2="data2";
    if (market.includes(data1)) { 
    this.value=this.calculateValue(value);
    }
  }

<table>
    <tr *ngFor="let data of datas | search:'Name':query;let i = index">
         <td> <button id="button" type="button" class="btn btn-info" [attr.aria-expanded]="this.activeRow == i" aria-controls="demo{{i}}" (click)="calculateValue(data.Name,data.value, i)">{{data.Name}}</button>
         <tr id="demo{{i}}" [ngbCollapse]="this.activeRow = i" 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>
</table>

展开一个并使用角度模板中的引导程序折叠所有内容

1 个答案: