如何在 ngFor 中使用 Angular 4 (HTML) 中的引号内的局部变量？答案

【问题标题】：How to use a local variable inside quotes in angular 4 (HTML) with ngFor?如何在 ngFor 中使用 Angular 4 (HTML) 中的引号内的局部变量？
【发布时间】：2018-05-14 13:36:02
【问题描述】：

我正在为我的项目使用 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。

【问题讨论】：

你试过[detail]="'detail1'+i"吗？
是的。基本上我需要 [detail]="detail1" 并且值 1 必须在每次 for 循环执行时递增。
所以不需要添加1 static 只需使用[detail]="'detail'+i"
你不能从数组中通过索引获取 details 元素吗？详情[i]
不，我不能使用数组索引。我附上了 stackblitz 的实现。你能看一下吗？

标签： html angular interpolation ngfor

【解决方案1】：

尝试使用

 [detail]=" 'detail' + i "

或者

 detail="detail{{i}}"

【讨论】：

我的坏习惯的力量，对我来说更清楚（更清楚？），谢谢你指出这一点！
酷，无论如何 OP 提到他已经尝试过你的方式：p
显然不是第二个！
两种都试过了，没用。我需要 [detail]="detail1"。但是值 1 应该是在每次 for 循环执行后递增的变量。
@BharatVk [detail]="'detail'+i" 它应该可以工作，要么问题出在其他地方

【解决方案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>

您可以签入您的堆栈闪电战，只需替换 html 代码。

【讨论】：

我认为这应该通过索引创建detail1
不幸的是，事实并非如此。 :(
我正在更新我的帖子请检查这个。
不，我认为你没有明白我的意思。您已通过 [detail]="detail1"。如果我这样做，我会毫无疑问地得到输出。但是由于我使用的是 for 循环，因此我需要将变量作为 i 在“详细信息”中传递，例如 [detail]="'detail'+i"。但它不起作用。
好的，我明白了。但是为什么你需要[detail]="'detail'+i" 这个你能告诉我吗

【解决方案3】：

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

[detail]="getDetail(i)"

然后在你的 ts 文件中：

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

我自己没有尝试过，所以我不确定它是否会起作用。

【讨论】：