Angular *ngIf不能和ng-template一起工作

Question

当我有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>

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>

我们没有在模板中使用number。