时间戳

首页 > 解决方案 > 在 Angular 中嵌套 *ngFor

angular - 在 Angular 中嵌套 *ngFor

问题描述

我正在尝试动态创建具有卡头和卡体的卡。我有一个固定大小的数组，用于在卡头中打印。但是，当涉及到卡体时，我遇到了问题。我有一个固定的数组，但我想打印一些低于第一个卡头的值，一些低于第二个卡头的值，依此类推。我怎样才能做到这一点？我已经尝试了很多，但无法弄清楚。我的程序所做的是它只在每个卡片标题下方打印一个值，然后打印其余的值，而标题中没有任何内容。

这是我的代码：

HTML

<div class="card-header" id = "searchingcardheader">
    <p>{{fetchedData[0].CMPNYNAME}}</p>
  </div>
  <div *ngIf = "containsData">
    <div class="card-body">
      <div style = "width: 70%; margin: auto;" *ngFor = "let data of fetchedData; let i = index">
        <div class="card-header">
          <p>{{cardCheckArray[i]}}</p>
        </div>
        <div class="card-body">
          <p>{{data.DOCUMENT_NAME}}</p>
          <p>{{data.DATE_SUBMITTED | date: 'medium'}}</p>
          <p>{{data.PROCESS_NAME}}</p>
        </div>
      </div>

我正在删除我的打字稿中进程名称的重复值。我想要卡片标题中的 1 个进程名称，然后每个标题的卡片正文中需要 2-3 个值。

打字稿

var swap = this.fetchedData[0].PROCESS_NAME;

      for (var x in this.fetchedData)
      {
        if(swap == this.fetchedData[x].PROCESS_NAME)
        {
          continue;
        }
        else
        {
          this.cardCheckArray.push(swap);
          swap = this.fetchedData[x].PROCESS_NAME;
        }
      }
this.cardCheckArray.push(swap);

标签： angulartypescript

解决方案

您是在使用静态索引还是只是为了举例说明？我的意思是在这一行：

<p>{{fetchedData[0].CMPNYNAME}}</p>

这是一个使用嵌套 ngFor 的示例：

<div *ngFor="let item of itemsArray; let i = index">
     <p>{{fetchedData[index].CMPNYNAME}}</p>
     <div *ngFor="let subItem of item.subItems; let j = index">
          <p>{{subItem[j]}}</p>
     </div>
</div>

推荐阅读