为什么ng-content选择器在*ngFor内部不起作用

Question

这是stackblitz代码.

如你看到的

<div *ngFor="let number of numbers;let i = index">
        <div *ngIf="(number%2 !== 0);else even">
            <ul odd>{{number}}</ul>
        </div>
    <ng-template #even>
      <ul even>{{number}}</ul>
    </ng-template>    
</div>

我试图使用ng-content选择器渲染值,但它不在*ngFor循环内工作.为什么这样 ？如何使它工作？更喜欢这个img

我不想要两个ngFor循环,我希望它能与ng-content一起使用.

Answer 1

没有两个循环,你不能这样做.原因ng-content是占位符,它接受内部的动态html.现在,当您在代码中循环时,不会向even或odd选择器分配任何内容.但是,如果您将代码更改为以下

<child>
    <div *ngFor="let number of numbers;let i = index" even>
        <div *ngIf="(number%2 !== 0);else even">
            <ul>{{number}}</ul>
        </div>
    <ng-template #even>
      <ul>{{number}}</ul>
    </ng-template>    
  <!-- <ul even>Why its rendering and not others??</ul> -->
    </div>
</child>

您将看到输出更改为

这是因为没有ng-For为even选择器分配输出.

如果您将模板更改为以下

<child>
    <div *ngFor="let number of numbers;let i = index" odd>
        <div *ngIf="(number%2 !== 0)">
            <ul>{{number}}</ul>
        </div>
    </div>
    <div *ngFor="let number of numbers;let i = index" even>
    <div *ngIf="(number%2 == 0)">
      <ul>{{number}}</ul>
    </div>    
    </div>
</child>

它会工作

另外请记住,ng-For你不能将内容附加到一个even或一个odd部分,即使该功能可用,它也会用最后一个值覆盖该部分.

离开ng-for它.以下代码

<child>
  <div>
    <div odd>
      This should be under odd
    </div>
  </div>
</child>

也行不通

所以你想要实现的目标以及你试图实现它的方式并不受角度的支持.