javascript - Angular 2 更改禁用/启用选择选项

Question

我正在使用 Angular2，我有 2 个选择:

<div ng-controller="ExampleController">
<form name="myForm">
<label for="companySelect"> Company: </label>
<select name="companySelect" id="companySelect">
  <option *ngFor="let company of companies" 
           value="{{company.id}}"> {{company.name}}
  </option>
</select>

<label for="documentTypeSelect"> Type: </label>
<select name="documentTypeSelect" id="documentTypeSelect">
  <option value="type1">type1</option>
  <option value="type2">type2</option>
  <option  value="type3">type3</option>
</select>
 </form>
 <hr>
</div>

我想根据第一个选择更改第二个选择选项。我可以通过使用获取类型( bool 值)

company.companyRelations.pop().type1

company.companyRelations.pop().type2

现在，如果例如 type1 为 false，则应禁用第二个选择中的选项，如果 type2 为 true，则应启用选项。这可能吗？

编辑:

select 中的公司具有 deasdv、invoic 和 orders 属性，这些属性为 true 或 false。我现在如何将这些属性传递到 component.ts 属性中？是否有可能通过事件或什么？我想得到例如

company.companyRelations.pop().desadv

对于被选中的公司，它将在第二个中更改禁用的选项。

html

<form name="myForm">
<label for="companySelect"> Company: </label>
<select class="form-control" name="companySelect" id="companySelect" 
 [(ngModel)]="companySelect" (ngModelChange)="onChange($event)">
  <option [ngValue]="undefined" disabled  selected>Select...</option>
  <option *ngFor="let company of companies" [ngValue]="company.id">
 {{company.name}}</option>
</select>

<select  name="documentTypeSelect" id="documentTypeSelect">
  <option [ngValue]="undefined" disabled  selected>Select...</option>
  <option [disabled]="!desadv" value="desadv">desadv</option>
  <option [disabled]="!invoic" value="invoic">invoic</option>
  <option  [disabled]="!orders" value="orders">orders</option>
</select>
</form>

component.ts

  desadv: boolean = false;
  invoic: boolean = false;
  orders: boolean = false;

这里会是这样的:

  onChange(event) {
   if(event.desadv) {
     this.desadv = true;
   }
  }

我的解决方案:

html

 <form name="myForm">
<label for="companySelect"> Company: </label>
<select name="companySelect" id="companySelect" [(ngModel)]="companySelect" 
(ngModelChange)="onChange($event)">
  <option [ngValue]="undefined" disabled  selected>Select...</option>
  <option *ngFor="let company of companies" [ngValue]="company">
{{company.name}}</option>
</select>

<label for="documentTypeSelect"> Type: </label>
<select  name="documentTypeSelect" id="documentTypeSelect">
  <option [ngValue]="undefined" disabled  selected>Select...</option>
  <option [disabled]="!desadv" value="desadv">desadv</option>
  <option [disabled]="!invoic" value="invoic">invoic</option>
  <option  [disabled]="!orders" value="orders">orders</option>
  <option  [disabled]="!recadv" value="orders">recadv</option>
  <option  [disabled]="!shipment" value="orders">shipment</option>
</select>

component.ts

 onChange(event) {
this.desadv = event.companyRelations[0].desadv;
this.invoic = event.companyRelations[0].invoic;
this.orders = event.companyRelations[0].orders;
this.recadv = event.companyRelations[0].recadv;
this.shipment = event.companyRelations[0].shipment;
}

Answer 1

试试这个:

<select class="form-control" name="companySelect" id="companySelect" [(ngModel)]="companySelect" (ngModelChange)="onChange($event)">
    <option [ngValue]="undefined" disabled  selected>Select...</option>
    <option *ngFor="let company of companies" [ngValue]="company.id">{{company.name}}</option>
</select>

<select [disabled]="btnDisable" name="documentTypeSelect" id="documentTypeSelect">
  <option value="type1">type1</option>
  <option value="type2">type2</option>
  <option  value="type3">type3</option>
</select>

component.ts

private companySelect: any;
private btnDisable: boolean = true;

onChange(event) {
    if(event) {
        this.btnDisable = false;
    }
}