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

我在我的项目中使用Angular2可折叠。单击表行时，我希望显示详细信息。代码附在下面。基本上，如果我添加

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

参考ID
订单号
奥纳姆
计划生育
服务提供商
斯达
日期
-+{{detail.Reference_Id}}

{{detail.OId}
{{detail.OName}
{{detail.FP}
{{detail.SP}}
{{detail.Stat}
{{detail.date}
订单详情

数据1
数据2
数据3

提前谢谢

编辑：这是我试图实现的目标的stackblitz实现。为了演示，我使用了[detail]=“detail1”。但是我需要在for循环中使用一个变量“I”。 访问。

尝试使用

 [detail]=" 'detail' + i "

或

试试这个：

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

6565
{{detail.oid}
{{detail.pname}
{{detail.price}}
{{detail.qoh}}
订单详情

数据4
数据5
数据6

---

您可以签入stackblitz，只需替换html代码。

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

[detail]="getDetail(i)"

然后在ts文件中：

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

---

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

你试过了吗？[detail]=“detail1”+I”？是的。基本上，我需要[detail]=“detail1”，并且每次for循环执行时，值1必须递增。因此，不需要添加

1

static，只需使用

[detail]=“detail”+I”

就可以从数组中通过索引获取details元素吗？详细信息[i]不，我无法使用数组索引。我已经附加了stackblitz实现。你能看一下吗？我的坏习惯，对我来说更清楚了，谢谢你指出这一点！酷，不管怎样，OP在问题中提到他已经尝试过你的方法：显然不是第二种！两个都试过了，都没用。我需要[detail]=“detail1”。但是值1应该是在每次for循环执行后递增的变量。@BharatVk

[detail]=“'detail'+i”

它应该工作，或者问题在其他地方，然后我认为这应该通过索引创建

detail1

。不幸的是，它不是：（我正在更新我的帖子，请检查一下。不，我想你没有理解我的意思。你已经通过了[detail]=“detail1”。如果我这样做，我毫无疑问会得到输出。但是因为我使用了for循环，我需要像[detail]=“detail”+I一样在“detail”中传递变量。但是它不起作用。好的，我理解。但是为什么你需要

[detail]=“'detail'+i”

你能告诉我吗

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