选项值中的Angular 6 Follow up:[attr.disabled]禁用所有条目

主题：角度6，反应形式，下拉菜单，禁用一个选项： 禁用所有而不仅仅是一个预期值，即使检查器说disabled=false

早些时候，人们非常友好地帮助我解决我的问题： 但在我遇到路障后，它们似乎消失了，因此我提出了一个新问题：

为什么所有选项值都被禁用，而不仅仅是应该与语句匹配的选项值？

[attr.disabled]=“uplink2x===dropdown1Val”

（即使我硬编码

nic0

而不是

dropdown1Val

所有选项都被禁用）

组件1.ts：

nicAdapters: any[] = ['nic0','nic1','nic2','nic3','nic4','nic5','nic6','nic7','nic8','nic9','nic10']


   this.inputForm = this.fb.group({
    upLinks: this.fb.group ({
     NumberUplinks: ['2'],
        uplinksMgmt: this.fb.group ({
            uplink1: ['nic0'],
           uplink2: ['nic1'],
           uplink3: ['nic3'],
        })
    })
  })

public changedVal(val) { 
  this.dropdown1Val = val;
}

component.html：

<div class="select" formGroupName="uplinksMgmt">
   <select formControlName="uplink1" id="uplink1Id" class="selectBox" (change)="changedVal($event.target.value)">
      <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
   </select> 
</div>
<div class="select" formGroupName="uplinksMgmt">
   <select formControlName="uplink2" id="uplink2Id" class="selectBox" (change)="changedVal($event.target.value)">
      <option *ngFor="let uplink2x of nicAdapters" [attr.disabled]="uplink2x === dropdown1Val" [ngValue]="uplink2x">{{uplink2x}}</option>
   </select> 
</div>

{{uplink1x}}
{{uplink2x}}

编辑： 闪电战：

似乎

disabled=“true”

（或者

disabled=“false”

）不适用于选项值

---

如果您使用的是被动形式，而不是使用（更改）=“…”，请订阅更改。此外，在html中，使用myForm.get（'myControl'）.value来引用控件的值

<div class="select" formGroupName="uplinksMgmt">
   <select formControlName="uplink2" id="uplink2Id" class="selectBox" 
      <!--remove the (change)
      (change)="changedVal($event.target.value)"
      -->
      >
      <option *ngFor="let uplink2x of nicAdapters" 
           [attr.disabled]="inputForm.get('uplik2').value=== dropdown1Val" 
           [ngValue]="uplink2x">{{uplink2x}}
      </option>
   </select> 
</div>

//in your .ts after create the form
this.inputForm.get('uplink2').valueChanges.subscribe(value=>{
   ..you logic here..
   console.log(value);
})

要禁用元素，只需使用属性
disabled
，而不是true或false。要再次启用它，需要删除
disabled
属性。在您的代码中，
[attr.disabled]
正在将值设置为true或false，您需要的只是使用
[disabled]
而不是
[attr.disabled]

  <option>Test FALSE</option>
  <option disabled>Test TRUE</option>

  <option *ngFor="let dropDownTestx of adapters" 
      [ngValue]="dropDownTestx" 
      [disabled]="dropDownTestx === 'vmnic2'">
      {{dropDownTestx}}
  </option>

测试错误
测试正确
{{dropDownTestx}}

更新您的stackblitz
听起来是创建stackblitz或代码笔的最佳时机。您的愿望是我的命令：谢谢，但不是这样。我试过了，每个选项都被禁用了。也许我在这里遗漏了什么，但是对于
inputForm.get（'uplik2'）.value
您正在比较设置的值，而不是在
*ngFor
中循环的值，不是吗？我只需要在上行链路1中选择的值在上行链路2中停用。