将 *NgFor 用于表标题并使用单独的 *NgFor 用于行并将行与列匹配答案

【问题标题】：Using *NgFor for table headings and using seperate *NgFor for rows and matching rows against the column将 *NgFor 用于表标题并使用单独的 *NgFor 用于行并将行与列匹配
【发布时间】：2021-07-05 03:15:02
【问题描述】：

我们有一个如下所示的数据结构（实际上不是这个，而是相同的结构）：

{
   "myData":{
      "dataItem1":[
         {
            "title":"Data Item 1 Title",
            "level":"4",
            "dataItem2":[
               {
                  "title":"Data Item 2 Title",
                  "dataItem3":[
                     {
                        "description":"A description for data item 3 "
                     },
                     {
                        "description":"Another description for data item 3  "
                     }
                  ]
               },
               {
                  "title":" Another Data Item 2 Title",
                  "dataItem3":[
                     {
                        "description":"A description for data item 3 "
                     },
                     {
                        "description":"Another description for data item 3  "
                     }
                  ]
               }
            ]
         }
      ]
   }
}

我们需要在表格中显示这些数据，以便dataItem2 标题位于表格的标题列中，然后dataItem3 描述位于每行的第一列中。然后对于相应的列，如果描述属于该数据项标题，我们希望在相应的列中放置一个标记。

下面的例子：

Table Style

我们使用 ngFor 来循环标题以在列中显示这些标题并为它们提供索引。然后，我们使用第二个 ngFor 列出每一行中的描述。我们试图做的是比较 ngiF 中的索引，如果它们匹配，那么这将显示标记。

问题：由于第一个循环在标题中，所以它直接在之后关闭，我们以后不能再在 ngIf 中访问索引。有没有办法我们仍然可以访问索引或这样做的替代方式？

<section class="table-responsive">
   <table class="table table-bordered p-3">
      <thead>
         <tr>
            <th class="w-25"></th>
            <ng-container *ngFor="let item2 of dataItem1.dataItem2; index as h">
               <th class="" >{{item2.title + h}}</th>
            </ng-container>
         </tr>
      </thead>
      <tbody>
         <div *ngFor="let item2 of dataItem1.dataItem2; index as j">
            <tr *ngFor="let item3 of item2.dataItem3; index as k">
               <td class="w-25 option">{{item3.description}} {{j}} {{k}}</td>
               <td class="" *ngFor="let item2 of dataItem1.dataItem2">
                  <div *ngIf="h==j">
                     <i class="fa fa-check">{{h}}</i>
                  </div>
               </td>
            </tr>
         </div>
      </tbody>
   </table>
</section>

【问题讨论】：

标签： angular html-table ngfor

【解决方案1】：

通过在项目 2 td 上添加索引 ref 然后将该索引与 J 而不是 h 进行比较来解决此问题。

        <tbody>
           <div *ngFor="let item2 of dataItem1.dataItem2; index as j">
              <tr *ngFor="let item3 of item2.dataItem3; index as k">
                <td class="w-25 option">{{item3.description}} {{j}} {{k}}</td>
                <td class="" *ngFor="let item2 of dataItem1.dataItem2; index as l">
                   <div *ngIf="l==j">
                      <i class="fa fa-check">{{h}}</i>
                   </div>
                 </td>
              </tr>
           </div>
        </tbody>

       <td class="" *ngFor="let item2 of dataItem1.dataItem2; index as l">
          <div *ngIf="l==j">
             <i class="fa fa-check">{{h}}</i>
          </div>
        </td>

【讨论】：