如何使用ngFor在angular 4（HTML）引号内使用局部变量？

Question

我在我的项目中使用Angular2-Collapsible。 在单击表格行时，我希望显示详细信息。 该代码附在下面。 基本上，如果我添加[detail]= "detail1"则可折叠表行详细信息将在单击时显示。 但是由于我使用的是for循环，因此必须使用变量i 。 我已经尝试过[detail]= "'detail'+i"和[attr.detail]= "'detail'+i" 。 似乎没有任何作用。

<collapsible-table [type]="'accordion'" borderedVertically="true" class="table">

 <thead class="table-heading">
   <collapsible-table-row>
     <th></th>
     <th>Reference ID</th>
     <th>Order ID</th>
     <th> OName</th>
     <th>FP</th>
     <th>SP</th>
      <th>Stat</th>
      <th>date</th>

   </collapsible-table-row>
 </thead>

 <tbody>
   <collapsible-table-row  *ngFor="let detail of details; let i = index" [attr.data-index]="i" [detail]="'detail'{{i}}">

     <td><div class="input-group-text">
     <input type="checkbox" aria-label="Checkbox for following text input">
   </div>
 </td>
     <td (click)="showFirst=!showFirst"><i class="material-icons" *ngIf="showFirst"><span class="bulleticon"> - </span></i><i class="material-icons" *ngIf="!showFirst"><span class="bulleticon"> + </span> </i>{{detail.Reference_Id}}<br></td>
     <td> {{detail.OId}} </td>
     <td>{{detail.OName}}</td>
     <td>{{detail.FP}}</td>
     <td>{{detail.SP}}</td>
     <td>{{detail.Stat}} </td>
     <td>{{detail.date}}</td>


   </collapsible-table-row>
   <collapsible-table-row-detail #detail1 class="hidden-table">
       <div class="container">
         <div class="list col-5">
             <span class="heading">  Order details </span>
             <ul class="unorderedlist">
               <li> data1  </li>
               <li> data2 </li>
               <li> data3</li>
             </ul>
         </div>
     </div>
   </tbody>

   </collapsible-table-row-detail>

提前致谢！

编辑：这是我要达到的目标的实现。 我已出于演示目的使用[detail] =“ detail1”。 但是我需要在for循环中使用变量“ i”。 访问https://stackblitz.com/edit/angular-fw5upv 。

Answer 1

尝试使用

 [detail]=" 'detail' + i "

要么

 detail="detail{{i}}"

Answer 2

尝试这个：

<tbody>
    <ng-container *ngFor="let detail of details; let i = index" >   
       <collapsible-table-row [attr.data-index]="i" [detail]="detail1">

          <td>
             <div class="input-group-text">
                <input type="checkbox" aria-label="Checkbox for following text input">
             </div>
         </td>
         <td >6565</td>
         <td> {{detail.oid}} </td>
         <td>{{detail.pname}}</td>
         <td>{{detail.price}}</td>
         <td>{{detail.qoh}}</td>
       </collapsible-table-row>
       <collapsible-table-row-detail #detail1 class="hidden-table">
          <div class="container">
             <div class="list col-5" >
                <span class="heading">  Order details </span>
                   <ul class="unorderedlist">
                      <li> data4 </li>
                      <li> data5</li>
                      <li> data6 </li>
                  </ul>
           </div>
         </div>
       </collapsible-table-row-detail>
     </ng-container>
   </tbody>

您可以检查您的stackblitz，只需替换html代码即可。

Answer 3

您可以尝试在HTML中使用以下方法：

[detail]="getDetail(i)"

然后在您的ts文件中：

getDetail(i: number) {
  return 'detail' + i;
}

我自己还没有尝试过，所以不确定是否可以使用。