角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> 

我想這取決於第一選擇改變第二選擇選項。我可以用

company.companyRelations.pop得到類型（布爾值）（）。TYPE1

company.companyRelations.pop（）。TYPE2

而現在，例如，如果type1爲false，應該禁用second select中的選項，如果type2爲true，則應啓用選項。那可能嗎？

編輯：

公司中選擇具有是真的還是假的deasdv，INVOIC和訂單屬性。我怎樣才能將這些屬性傳遞到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; 
    } 
} 

Answer 2

是的，它是可能的。 我已經創建了一個演示，其中將啓用第二次下拉，具體取決於第一個下拉對象中標誌的值。

// Code goes here 
 

 
var myApp = angular.module('plunker',[]); 
 
angular.module('plunker').controller('MyCtrl', MyCtrl) 
 
MyCtrl.$inject = ['$scope']; 
 
function MyCtrl($scope) { 
 
$scope.items1 = [{ 
 
id: 1, 
 
label: 'aLabel', 
 
'flag':true, 
 
subItem: { name: 'aSubItem' } 
 
}, { 
 
id: 2, 
 
label: 'bLabel', 
 
'flag':false, 
 
subItem: { name: 'bSubItem' } 
 
}]; 
 

 
$scope.items2 = [{ 
 
id: 1, 
 
label: 'MyName', 
 
'flag':true, 
 
subItem: { name: 'aSubItem' } 
 
}, { 
 
id: 2, 
 
label: 'YourName', 
 
'flag':false, 
 
subItem: { name: 'bSubItem' } 
 
}]; 
 

 
$scope.changeDetect = function(){ 
 
    $scope.selected1=''; 
 
    console.log($scope.selected); 
 
    if($scope.selected.flag) 
 
    { 
 
    $scope.flagValue=false; 
 
    } else { 
 
    $scope.flagValue=true; 
 
    } 
 

 
} 
 

 
$scope.flagValue=true; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> 
 

 
<div ng-app="plunker" ng-controller="MyCtrl"> 
 
    <select ng-options="item as item.label for item in items1 track by item.id" ng-model="selected" ng-change="changeDetect()"></select> 
 
    
 
    <select ng-options="item as item.label for item in items2 track by item.id" ng-model="selected1" ng-disabled="flagValue"></select> 
 
    </div>

在AngularJS 2

<select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3"> 
    <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option> 
    </select> 
<select [ngModel]="selectedDeviceObj1" name="sel2" [disabled]="flag"> 
    <option [ngValue]="i" *ngFor="let i of deviceObjects1">{{i.name}}</option> 
    </select> 
onChangeObj(newObj) { 
    this.selectedDeviceObj1=''; 
    console.log(newObj); 
    this.selectedDeviceObj = newObj; 
    if(newObj.flag){ 
     this.flag = false; 
    } 
    else { 

     this.flag = true; 
    } 

請找演示鏈接Plunkr