时间戳

首页 > 解决方案 > 如何检查 ngFor 内部的条件

angular - 如何检查 ngFor 内部的条件

问题描述

我正在使用 formArray 进行动态选择。如果已选择选项，我想禁用选择字段中的选项。

我正在使用角度 8

<form [formGroup]="surveyForm">

    <div formArrayName="question1">
        <label>Question 1</label>
        <div *ngFor="let que of question.controls;let i=index">
            <select  [formControlName]="i">
                <option *ngFor="let emp of employeeList" [value]="emp.id">{{ emp.name }}</option>
            </select>
            <button (click)="delPerson(i)">Delete</button>
        </div>    
        <button (click)="addPerson()">Add Person</button> 
    </div>

    <button type="submit" [disabled]="!surveyForm.valid" (click)="onSubmit()">Submit</button>

</form>

标签： angularngforangular-ng-if

解决方案

使用可以使用里面存储的表单控件formArray来检查id和selected值

    <div formArrayName="question1" *ngFor="let que of surveyForm.get('question1').controls;let i=index">
        <label>Question 1</label>
        <div>
            <select  [formControlName]="i">
                <option *ngFor="let emp of employeeList" [value]="emp.id" [disabled]='emp.id == que.value'>{{ emp.name }}</option>
            </select>
            Selected Id : {{que.value}}
            <button (click)="delPerson(i)">Delete</button>
        </div>    
        <button (click)="addPerson()">Add Person</button> 
    </div>

    <button type="submit" [disabled]="!surveyForm.valid" (click)="onSubmit()">Submit</button>

</form>

请参阅 Stackblitz 示例：https ://stackblitz.com/edit/angular-svor7x

推荐阅读