如何检查 ngFor 内部的条件答案

【问题标题】：How can I check condition inside ngFor如何检查 ngFor 内部的条件
【发布时间】：2019-08-14 04:02:03
【问题描述】：

我正在使用 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>

【问题讨论】：

已经在另一个问题中选择是什么意思？
嗨@unni bhaskar，如果有任何答案解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。

标签： angular ngfor angular-ng-if

【解决方案1】：

您可以为选择元素使用模板变量并检查元素值是否等于选项值

<ng-container>
        <div *ngFor="let que of question.controls;let i=index">

            <select  [formControlName]="i" #selectElem>
                <option *ngFor="let emp of employeeList" [value]="emp.id"
                        [disabled]="selectElm.value == emp.id">
                 {{ emp.name }}
                </option>

            </select>
            <button (click)="delPerson(i)">Delete</button>
        </div>    
</ng-container>

demo ??

【讨论】：

【解决方案2】：

使用可以使用存储在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

【讨论】：