Angular中ngFor的else模板重复显示问题及数据获取咨询

一、让错误模板仅显示一次 #

当前代码中crCreationFailTmp重复显示，是因为在*ngFor循环内部对每个value单独判断，每遇到无crId的项就渲染一次模板。要实现仅显示一次错误提示，需先过滤有效项渲染列表，再单独判断是否存在失败项，存在则一次性渲染错误模板：

修改后的模板代码 #

<ol class="lmn-list-group lmn-list-group-initial">
  <!-- 只循环渲染有crId的项 -->
  <ng-container *ngFor="let value of group.values.filter(v => v.crId)">
    <li class="lmn-list-group-item">
      <a [href]="value.crUrl" target="_blank" [mtTooltip]="value.crId" placement="top">
        {{ 'CR IN ' + value.crId }}
      </a>
      <div class="lmn-pb-2 bfaText">{{ value.name }}</div>
    </li>
  </ng-container>
</ol>

<!-- 判断是否存在创建失败的项，有则显示一次错误提示 -->
<ng-container *ngIf="group.values.some(v => !v.crId)">
  <p class="lmn-pl-3 lmn-text-danger">Change request creation failed</p>
</ng-container>

若想保留ng-template写法，可使用*ngTemplateOutlet：

<ol class="lmn-list-group lmn-list-group-initial">
  <ng-container *ngFor="let value of group.values.filter(v => v.crId)">
    <li class="lmn-list-group-item">
      <a [href]="value.crUrl" target="_blank" [mtTooltip]="value.crId" placement="top">
        {{ 'CR IN ' + value.crId }}
      </a>
      <div class="lmn-pb-2 bfaText">{{ value.name }}</div>
    </li>
  </ng-container>
</ol>

<ng-template #crCreationFailTmp>
  <p class="lmn-pl-3 lmn-text-danger">Change request creation failed</p>
</ng-template>

<ng-container *ngIf="group.values.some(v => !v.crId); else noFail">
  <ng-container *ngTemplateOutlet="crCreationFailTmp"></ng-container>
</ng-container>
<ng-template #noFail></ng-template>

核心逻辑：用filter筛选有crId的项渲染列表，再用some方法判断数组中是否存在无crId的项，存在则仅显示一次错误提示。

二、将*ngIf放在*ngFor之前时获取value.crId #

若把*ngIf放在*ngFor前面，此时ngIf的上下文是group而非单个value，无法直接访问value.crId。这种情况下只能基于整个数组的状态做判断，比如：

• 判断数组中是否存在有crId的项：group.values.some(v => v.crId)
• 判断数组中所有项都有crId：group.values.every(v => v.crId)

示例代码：

<!-- 判断数组中存在至少一个有crId的项时，才渲染整个列表 -->
<ng-container *ngIf="group.values.some(v => v.crId)">
  <ol class="lmn-list-group lmn-list-group-initial">
    <ng-container *ngFor="let value of group.values">
      <li class="lmn-list-group-item">
        <a [href]="value.crUrl" target="_blank" [mtTooltip]="value.crId" placement="top">
          {{ 'CR IN ' + value.crId }}
        </a>
        <div class="lmn-pb-2 bfaText">{{ value.name }}</div>
      </li>
    </ng-container>
  </ol>
</ng-container>

如果判断逻辑必须基于单个value的crId，则*ngIf必须放在*ngFor内部，因为只有进入循环后才会生成单个value的上下文。

内容的提问来源于stack exchange，提问作者Kiara