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] =＆＃34; detail1＆＃34;用于演示目的。但我需要使用一个变量＆＃34; i＆＃34;在for循环中。访问https://stackblitz.com/edit/angular-fw5upv。

Answer 1

尝试使用

 [detail]=" 'detail' + i "

或者

 detail="detail{{i}}"

Answer 2

试试这个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

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

Answer 3

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

[detail]="getDetail(i)"

然后在你的ts文件中：

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

我自己没试过，所以我不确定它是否会奏效。

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

3 个答案: