Angular *ngIf 未与 ng-template 结合使用

Question

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

为了解决这个问题，我使用了以下代码，它结合了 *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>

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

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

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

Angular *ngIf 未与 ng-template 结合使用

Angular *ngIf is not working in conjunction with ng-template

angular-ng-if

ng-template

angular