如何在ngFor循环角外显示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容器上。

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

Answer 1

使用ng模板上下文并设置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>