Angular中如何在ngFor循环外显示满足条件的循环数据？

核心思路是把对ys[i]第一个元素的判断逻辑提到{{x}}内容的上方，直接在那里决定是否渲染printData模板，这样就能满足"满足条件时模板显示在x内容上方"的需求，同时复用模板、避免冗余代码。

优化后的代码示例 #

<ng-container *ngFor="let x of xs; let i = index">
  <!-- 前置判断：当前xs项对应的ys数组第一个元素满足条件则渲染模板 -->
  <ng-container *ngIf="ys[i]?.[0]?.value">
    <ng-container *ngTemplateOutlet="printData"></ng-container>
  </ng-container>

  <p>
    <span>{{x}}</span>
  </p>

  <!-- 处理ys循环：跳过已在外层处理的第一个元素，避免重复渲染 -->
  <ng-container *ngFor="let y of ys[i]; let j = index">
    <p *ngIf="j !== 0 && y?.value">
      <span>Test</span>
    </p>
  </ng-container>

  <!-- 复用的模板定义 -->
  <ng-template #printData>
    <p>
      <span>Test</span>
    </p>
  </ng-template>
</ng-container>

关键说明 #

1. 位置调整：将对ys[i][0]的条件判断移到{{x}}元素之前，满足条件时模板直接渲染在目标位置，彻底解决之前"模板只能在内部循环位置渲染"的问题。
2. 避免重复渲染：内部循环通过j !== 0跳过第一个元素，因为已经在外层处理过该元素的条件渲染。
3. 空值安全：使用?.安全导航操作符处理ys[i]为空或未定义的情况，避免控制台报错。

更简洁的写法（利用管道简化循环） #

可以用slice:1管道直接跳过第一个元素，减少循环内的条件判断：

<ng-container *ngFor="let x of xs; let i = index">
  <!-- 用then语法简化ngIf逻辑 -->
  <ng-container *ngIf="ys[i]?.[0]?.value; then printData"></ng-container>

  <p>
    <span>{{x}}</span>
  </p>

  <!-- slice:1 直接截取从第二个元素开始的数组 -->
  <ng-container *ngFor="let y of ys[i] | slice:1">
    <p *ngIf="y?.value">
      <span>Test</span>
    </p>
  </ng-container>

  <ng-template #printData>
    <p>
      <span>Test</span>
    </p>
  </ng-template>
</ng-container>

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