Angular *ngIf 不能与 ng-template 一起使用答案

【问题标题】：Angular *ngIf is not working in conjunction with ng-templateAngular *ngIf 不能与 ng-template 一起使用
【发布时间】：2021-08-30 07:51:31
【问题描述】：

与拥有 3 个或更多图标时相比，最多 3 个图标时我需要的空间更少。

为了解决这个问题，我使用了以下代码，它结合了 *ngIf 和 ng-template。

但是，这种组合不起作用。您可以查看下面的 HTML 代码：

<div *ngIf="i < 3; then 3Icons else MoreThan3Icons">

    <ng-template #3Icons>
        <div class="col-2 statistic-element-physical" *ngFor="let icon of content; index as i;" [ngClass]="{'offset-1': i === 0 }">
            <div class="circle-physical-3icons"><img src={{icon.IMAGE}} alt="statistics-icon" style="height: 4.25rem;width: 4.25rem;"></div>
            <h3 class="number-gold-physical-3icons">{{icon.HEADLINE}}</h3>
            <p class="text-grey-physical-3Icons">{{icon.TEXT}}</p>
        </div>
    </ng-template>

    <ng-template #MoreThan3Icons>
        <div class="col-4 statistic-element-physical" *ngFor="let icon of content; index as i;" [ngClass]="{'offset-1': i === 0 }">
            <div class="circle-physical-MoreThan3Icons"><img src={{icon.IMAGE}} alt="statistics-icon" style="height: 4.25rem;width: 4.25rem;"></div>
            <h3 class="number-gold-physical-MoreThan3Icons">{{icon.HEADLINE}}</h3>
            <p class="text-grey-physical-MoreThan3Icons">{{icon.TEXT}}</p>
        </div>
    </ng-template>
</div>

【问题讨论】：

你的问题是什么？你有错误吗？它总是显示第一个（或第二个）模板？
是的，我得到了这个：解析器错误：在 [i

标签： angular angular-ng-if ng-template

【解决方案1】：

您的ng-template 应该在ngIf 之外

  <div *ngIf="i < 3; then 3Icons else MoreThan3Icons"></div>

    <ng-template #3Icons>
        <div class="col-2 statistic-element-physical" *ngFor="let icon of content; index as i;" [ngClass]="{'offset-1': i === 0 }">

            <div class="circle-physical-3icons"><img src={{icon.IMAGE}} alt="statistics-icon" style="height: 4.25rem;width: 4.25rem;"></div>
            <h3 class="number-gold-physical-3icons">{{icon.HEADLINE}}</h3>
            <p class="text-grey-physical-3Icons">{{icon.TEXT}}</p>

        </div>
    </ng-template>

    <ng-template #MoreThan3Icons>
        <div class="col-4 statistic-element-physical" *ngFor="let icon of content; index as i;" [ngClass]="{'offset-1': i === 0 }">

            <div class="circle-physical-MoreThan3Icons"><img src={{icon.IMAGE}} alt="statistics-icon" style="height: 4.25rem;width: 4.25rem;"></div>
            <h3 class="number-gold-physical-MoreThan3Icons">{{icon.HEADLINE}}</h3>
            <p class="text-grey-physical-MoreThan3Icons">{{icon.TEXT}}</p>

        </div>
    </ng-template>

【讨论】：

【解决方案2】：

试试这个

<div *ngIf="i < 3; then ThreeIcons; else MoreThanThreeIcons"></div>

    <ng-template #ThreeIcons>
      <div>3</div>
    </ng-template>

    <ng-template #MoreThanThreeIcons>
      <div>3 More</div>
    </ng-template>

我们没有在模板中使用数字。

【讨论】：