如何在 ngFor 循环 angular 之外显示 ngFor 数据？

Question

我的组件中有两个 ngFor 循环。

<ng-container *ngFor="let x of xs; let i = index">
    <ng-template #printData>
      <p>
        <span>Test</span>
      </p>
    </ng-template>
    <p>
      <span>{{x}}</span>
    </p>
    <!-- Iterate ys-->
    <ng-container *ngFor="let y of ys[i]; let j = index">
      <ng-container *ngIf="j==0 && y?.value; else normalPrintData">
        <ng-container *ngTemplateOutlet="printData"></ng-container>
      </ng-container>
      <ng-template #normalPrintData>
         <p *ngIf="y?.value">
            <span>Test</span>
         </p>
      </ng-template>
</ng-container>

基本上我有两个 for 循环，但如果满足某些条件，我想在正常的“x”插值上方显示 printData。 我尝试使用 ngTemplateOutlet 但这不起作用，因为模板只是打印在调用它的 ng-container 上。

使用 ngIf 可以，但我觉得可以实现更好的解决方案。 请帮忙。

Answer 1

如何使用 ng-template上下文并设置x属性。

<ng-container *ngFor="let x of xs; let i = index">
    <ng-template #printData>
      <p>
        <span>{{x}}</span>
      </p>
      <p>
        <span>Test</span>
      </p>
    </ng-template>
    <!-- Iterate ys-->
    <ng-container *ngFor="let y of ys[i]; let j = index">
      <ng-container *ngIf="j==0 && y?.value; else normalPrintData">
        <ng-container *ngTemplateOutlet="printData; context: {x}"></ng-container> <!-- <------ changed here -->
      </ng-container>
      <ng-template #normalPrintData>
         <p *ngIf="y?.value">
            <span>Test</span>
         </p>
      </ng-template>
</ng-container>