为什么ng-content选择器无法在* ngFor内部工作 [英] Why ng-content selector is not working inside *ngFor

问题描述

这是stackblitz代码./p>

如您所见

<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一起使用.

解决方案

没有两个循环，您将无法执行此操作.原因是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>

也将无法正常工作

因此，angular不支持您要实现的目标以及实现该目标的方式.

Here is the stackblitz code.

As you can see

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

I am trying to render values using ng-content selectors but it isn't working inside *ngFor loop. Why so ? How to make it work ? More like this img

I don’t want two ngFor loop, I am looking to make it work with ng-content.

解决方案

You cannot do this, without two loops. The reason being ng-content is a placeholder, which accepts dynamic html inside. Now when you loop inside your code, you don't assign anything to the even or odd selector. But if you change your code to below

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

You will see the output change to

This is because no the output of ng-For has been assigned to the even selector.

If you change the template to below

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

It will work

Also remember inside a ng-For you cannot append content to a even or odd section, even if that feature was available it would have overwritten the section with the last value.

Leaving even ng-for out of it. The below code

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

Also won't work

So what you are trying to achieve and the way you are trying to achieve it is not supported by angular.

这篇关于为什么ng-content选择器无法在* ngFor内部工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！