根据 angular 中的方法禁用选项

Question

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

示例我有 4 个选项：

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

Component.ts 有这个代码：

disable(){
}

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

Answer 1

一个选项是将值作为参数传递给禁用：

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";
}

此表达式将 return true 或 false.

此解决方案应该有效。

根据 angular 中的方法禁用选项

Disable option based on method in angular

javascript

html-select

angular