角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