Как использовать локальную переменную внутри кавычек в угловых 4 (HTML) с ngFor?

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. Визит https://stackblitz.com/edit/angular-fw5upv.

Answer 1

Попробуйте это:

<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-код.

Answer 2

Вы можете попробовать использовать метод в вашем HTML, например:

[detail]="getDetail(i)"

А затем в вашем файле TS:

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

Я сам не пробовал, поэтому яне уверен, что это сработает.

Answer 3

Попробуйте использовать

 [detail]=" 'detail' + i "

Или

 detail="detail{{i}}"