Question

我无法获得这两个ng-container - ion-item内的条件开始工作：

<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 - 元素添加相同的条件）它几乎正常工作（ngIf ng-container除外再次总是错误的，而ngIf上的ion-label执行得很好）：

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

我做错了什么？

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

ngIf里面没有工作

1 个答案: