Angular 为什么ng内容选择器在*ngFor中不起作用

如你所见

<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>

{number}
{number}

我试图使用

ng content

选择器呈现值，但它在

*ngFor

循环中不起作用。为什么会这样？如何让它工作？更像这个img

---

我不想要两个ngFor循环，我希望它能与ng内容一起工作。

您可以通过两个循环来实现：

<div>
    <ng-container *ngFor="let number of numbers; let isFirst=first">
        <h2 *ngIf="isFirst">Odd Numbers</h2>
      <p>{{(number%2>0? number : '')}}</p>
   </ng-container>

  <ng-container *ngFor="let number of numbers; let isFirst=first">
      <h2 *ngIf="isFirst">Even</h2>
      <p>{{(number%2==0? number : '')}}</p>
  </ng-container>
</div>

单号
{{（编号%2>0？编号：''）}

即使
{{（编号%2==0？编号：“”}

解决方案之一是对数字数组进行排序。您可以使用自己的管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'oddFirst'})
export class OddFirstPipe implements PipeTransform {

  transform(numbers: number[], args: any[]): number[] {
    const odd = numbers.filter(num => num % 2 !== 0);
    const even = numbers.filter(num => num % 2 === 0);
    return [...odd, ...even];
  }

}

然后您可以在模板中使用它：

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

{number}
{number}

您可以使用纯CSS来完成

看看修改后的StackBlitz

---

CSS显示网格创造奇迹。请记住，IE并不（完全）支持它。

这是因为嵌套

---

我运行了一些，内容似乎根本无法嵌套，我们不能因此责备

*ngFor

。即使在for循环上使用

ng container

，也无济于事。

如果没有两个循环，就无法做到这一点。原因是

ng content

是一个占位符，它在内部接受动态html。现在，当您在代码内部循环时，您不会将任何内容分配给

偶数

或

奇数

选择器。但如果您将代码更改为下面的

<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>

<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

中，您不能将内容附加到

偶数

或

奇数

节，即使该功能可用，也会用最后一个值覆盖该节

即使是

ng，也要将其排除在外。下面的代码

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


这应该是奇数

也不行


因此，angular不支持您试图实现的内容和实现方式。
首先让我们看看投影/ngContent是什么。

投影是角度测量中一个非常重要的概念。它使开发人员能够构建可重用组件，并使应用程序更具可伸缩性和灵活性

更简单地说，它有助于动态添加内容，这些内容可以作为html或组件内部的文本来自服务器，而无需创建类似document.createtextnode（）的DOM节点

投影参考：

投射类似于指令中的angularjs转换。

让我们跳到你的问题。

这是正确的，我们需要两个循环重复内容的奇数和偶数根据您的要求。原因：ngFor在DOM中添加了相同模板的新实例

工作代码


例子：
App.component.html


//这会奏效的
{{number[1]}}

child.component.html



上面的示例将起作用，因为我们正在ngContent中投影最外面的dom节点

您可以尝试投影下面的代码

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

app.component.html



上述代码将不会仅投影组件中可用的最外层节点，即代码中的原因

<ul odd>Something</ul>

某物

是投影的，其他的不是。
也许你可以从中得到一个想法：我正在渲染的
标签呢？我不想要排序列表，所以我可以实现相同的*ngIf并拥有它。我不是在寻找这个解决方案：（我可以看到所有答案都在
甚至
@TarunLalwani:非常感谢。在选择你的答案之前，我一直在等待其他答案。你的答案也被投了赞成票：）。我已经采用了你提出的变通办法。选择您的答案以确认
ng内容
不会像我预期的那样工作。
 <child>
        <ng-container>
            <ng-content select="[odd]"></ng-content>
        </ng-container>
    </child>

<ul odd>Something</ul>