在angular中禁用基于方法的选项

Question

我正在尝试禁用基于方法的选项。

示例我有四个选项:

A
B
C
D

我的方法(示例):

if(name == A) {
disable select for A.
}

我代码:

this.http.getDataFromServer("api/....).subscribe((resp) => {

this.code = resp.data["route"];
console.log(this.code);
});

在this.code中我有多个数据。这是组件中的HTML:

<div class="form-group">
<label for="route_code">
Route Code
</label>
<select type="text" class="form-control" formControlName="route_code" (change)="codeSelected($event.target.value)">
<option [value]="r.id"  *ngFor="let r of code" [disabled]="disable()">
{{r.code}}
</option>
</select>
</div>

这里我有我的HTML代码，其中r.code是选项。

搜索后，我找到了[disable]，我可以将其分配给disable()方法

组件。它的代码是:

disable(){
}

我应该在disable方法中添加什么?例如，我想禁用一个选项，如果r.code == "A"。你能帮我一下吗?

Answer 1

一种选择是将值作为参数传递给disable:

component.html

<div class="form-group">
<label for="route_code">
Route Code
</label>
<select type="text" class="form-control" formControlName="route_code" (change)="codeSelected($event.target.value)">
<option [value]="r.id" *ngFor="let r of code" [disabled]="disable(r.code)">
{{r.code}}
</option>
</select>
</div>

component.ts

disable(code: string): boolean {
return code === "A";
}

Answer 2

你可以在你的方法中传递当前的r。

<option [value]="r.id"  *ngFor="let r of code" [disabled]="disable(r)">
{{r.code}}
</option>

然后在disable方法中，你可以像这样接收你传递的值。

disable(r){
return r.code === "A";
}

这个表达式将返回true或false。

这个解决方案应该可行。