在字符串数组中选择选项时设置属性

【问题标题】：Set attribute when selecting option in an array of string在字符串数组中选择选项时设置属性
【发布时间】：2020-12-08 18:00:08
【问题描述】：

我有一个禁用的输入，当我必须在我的选择中选择一个特定选项时，我想将它传递为 false。选择我的选项后得到正确的值，但我认为事件没有被触发。

功能

  onChange() {
    this.selectedValue;
    var r = document.getElementById('myInput'); 
    if (this.selectedValue != this.listeOfString[0]) {
      r.setAttribute('disabled', 'false');
    }
  }

输入

  <select [(ngModel)]="selectedValue" (ngModelChange)="onChange()">
     <option *ngFor="let string of listeOfString">
           {{ string }}
     </option>
  </select>
<input type="text" id="myInput" [(ngModel)]="myString" disabled/>

【问题讨论】：

标签： javascript angular

【解决方案1】：

HTML

<input type="text" id="myInput" [(ngModel)]="myString" [attr.disabled]="isInputDisabled"/>`

isInputDisabled: boolean;
onChange() {
    if (this.selectedValue != this.listeOfString[0]) {
      this.isInputDisabled = false;
    }
  }

请记住，Angular 是基于数据的框架，因此它更适合数据绑定。
如果您必须手动操作 DOM，请始终使用 Renderer。

您的解决方案可能不起作用，因为：

您输入的 id 在运行时不正确。
手动操作 DOM 后，您还没有触发 change detection。

PS：排序当你写作时：[(ngModel)]="selectedValue" (ngModelChange)="onChange()"做很重要。如果您将(ngModelChange) 放在2-way-binding 之前，它将在selectedValue 更改之前被调用。

【讨论】：

什么是this.isInputDisabled？
组件上的属性。 isInputDisabled = true;