NgFor 中的 ngIf 不起作用答案

【问题标题】：ngIf inside NgFor not workingNgFor 中的 ngIf 不起作用
【发布时间】：2017-12-05 00:00:59
【问题描述】：

我无法在ion-item 中得到这两个ng-container-conditions 开始工作：

<ion-list *ngIf="slide.options">
    <ion-item *ngFor="let option of slide.options">
        <ng-container *ngIf="option.type === 'boolean'">
            <ion-label>
                <h2 *ngIf="option.title" [innerHTML]="option.title"></h2>
                <p *ngIf="option.description" [innerHTML]="option.description"></p>
            </ion-label>
            <ion-toggle *ngIf="option.checked !== undefined || option.disabled !== undefined" [disabled]="option.disabled" [checked]="option.checked"></ion-toggle>
        </ng-container>
        <ng-container *ngIf="option.type === 'range'">
            <h2 *ngIf="option.title" [innerHTML]="option.title"></h2>
            <p *ngIf="option.description" [innerHTML]="option.description"></p>
            <ion-range *ngIf="option.min !== undefined || option.max !== undefined" [min]="option.min" [max]="option.max" [step]="option.steps" pin="true" snaps="true">
                <ion-label range-left>{{option.min}} {{option.unit}}</ion-label>
                <ion-label range-right>{{option.max}} {{option.unit}}</ion-label>
            </ion-range>
        </ng-container>
    </ion-item>
</ion-list>

它们总是被视为虚假的。这会产生一个空白空间：

但是以这种方式（或者直接将相同的条件添加到ion-toggle 和ion-range-元素时）它几乎可以工作（除了ng-container 上的ngIf 再次总是错误的，而@ ion-label 上的 987654330@ 执行良好）：

<ion-list>
    <ion-item *ngFor="let option of slide.options">
        <ion-label *ngIf="option.checked !== undefined || option.disabled !== undefined">
            <h2 *ngIf="option.title" [innerHTML]="option.title"></h2>
            <p *ngIf="option.description" [innerHTML]="option.description"></p>
        </ion-label>
        <ng-container *ngIf="option.min !== undefined || option.max !== undefined">
            <h2 *ngIf="option.title" [innerHTML]="option.title"></h2>
            <p *ngIf="option.description" [innerHTML]="option.description"></p>
        </ng-container>
        <ion-toggle *ngIf="option.checked !== undefined || option.disabled !== undefined" [disabled]="option.disabled" [checked]="option.checked"></ion-toggle>
        <ion-range *ngIf="option.min !== undefined || option.max !== undefined" [min]="option.min" [max]="option.max" [step]="option.steps" pin="true" snaps="true">
            <ion-label range-left>{{option.min}} {{option.unit}}</ion-label>
            <ion-label range-right>{{option.max}} {{option.unit}}</ion-label>
        </ion-range>
    </ion-item>
</ion-list>

我做错了什么？

【问题讨论】：

您有什么问题吗？似乎是正确的，你可以显示你的数据的 console.log 吗？
您的控制台是否有任何错误？
@DanielSeguraPérez 我添加了截图。
@Und3rTow 控制台中没有错误或相关日志条目。

标签： angular ionic-framework ionic3

【解决方案1】：

我通过不使用ng-container 代替*ngIf 而是使用*ngFor 并将*ngIf 放在ion-item 上的迭代来使其工作：

<ion-list *ngIf="slide?.options">
    <ng-container *ngFor="let option of slide.options">

        <ion-item *ngIf="option?.type === 'boolean'">
            <ion-label>
                <h2 *ngIf="option?.title" [innerHTML]="option.title"></h2>
                <p *ngIf="option?.description" [innerHTML]="option.description"></p>
            </ion-label>
            <ion-toggle *ngIf="option?.checked !== undefined || option?.disabled !== undefined" [disabled]="option.disabled" [checked]="option.checked"></ion-toggle>
        </ion-item>

        <ion-item *ngIf="option?.type === 'range'">
            <ion-label class="range-pre-label">
                <h2 *ngIf="option?.title" [innerHTML]="option.title"></h2>
                <p *ngIf="option?.description" [innerHTML]="option.description"></p>
            </ion-label>
            <ion-range *ngIf="option?.min !== undefined || option?.max !== undefined" [min]="option.min" [max]="option.max" [step]="option.steps" pin="true" snaps="true">
                <ion-label range-left>{{option.min}} {{option.unit}}</ion-label>
                <ion-label range-right>{{option.max}} {{option.unit}}</ion-label>
            </ion-range>
        </ion-item>

    </ng-container>
</ion-list>

【讨论】：