[英]How to disable Option from mat-select based on Condition
I two mat-select, in the first one I select the type of Customer Individual or Organizational Customer. 我选择了两个mat-select,在第一个中我选择了Customer Individual或Organizational Customer的类型。 If User selects Ind Customer I show another mat-select. 如果用户选择了Ind Customer,我会显示另一个mat-select。 However, the issue is in second mat-select the dropdown options I want to disable certain input fields. 但是,问题在于第二个mat-select我想要禁用某些输入字段的下拉选项。 How can I achieve that? 我怎样才能做到这一点?
HTML Code to select Type of Customer HTML代码选择客户类型
<mat-form-field>
<mat-label>Select Customer Type</mat-label>
<mat-select (onSelectionChange)="getCustType($event)">
<mat-option *ngFor="let obj of custType" (click)="getCustType(obj)"
[value]="obj" > {{ obj.viewValue }}</mat-option>
</mat-select>
</mat-form-field>
Typescript code: 打字稿代码:
custType: any[] = [{ value: 'indCust', viewValue: 'IndividualCustomer' }, { value: 'orgCust', viewValue: 'Organizational Customer' }];
Second Dropdown HTML CODE : 第二个下拉HTML代码:
<mat-form-field class="col-sm-3">
<mat-label>Select Option to Edit</mat-label>
<mat-select (onSelectionChange)="getoptiontoedit($event)" >
<mat-option *ngFor="let obj of optiontoeditlist" (click)="getoptiontoedit(obj)" [value]="obj"> {{ obj.viewValue }}</mat-option>
</mat-select>
</mat-form-field>
Typescript Code for Second Dropdown: 第二次下拉的打字稿代码:
optiontoeditlist: any[] = [
{ value: 'address', viewValue: 'Address' },
{ value: 'agentRelationship', viewValue: 'Agent Relationship' },
{ value: 'agreementRelationship', viewValue: 'Agreement Relationship' },
{ value: 'organizationCustomer', viewValue: 'Organization Customer' },
{ value: 'complaint', viewValue: 'Complaint' },
{ value: 'contact', viewValue: 'Contact' },
{ value: 'identification', viewValue: 'Identification' },
{ value: 'individualCustomer', viewValue: 'Individual Customer'}
];
I want to disable/hide individualCustomer option from the second dropdown if a user selects Organization Customer in the first dropdown similarly I want to disable/hide OrganazationalCustomer from the second dropdown if a user selects Individual Customer in the first dropdown. 如果用户在第一个下拉列表中选择“组织客户”,我想要从第二个下拉列表中禁用/隐藏individualCustomer选项,类似地,如果用户在第一个下拉列表中选择“个人客户”,我希望从第二个下拉列表中禁用/隐藏OrganazationalCustomer。
You can implement a pipe for your second options list like below 您可以为您的第二个选项列表实现管道,如下所示
@Pipe({ name: 'optfilter' })
export class OptionsFilterPipe implements PipeTransform {
transform(alloptions: any[],firstSelectOpt: any<>) {
return alloptions.filter(option => option.value.indexOf(firstSelectOpt.value)==-1); // or whatever your comparator condition is this just for indication
}
}
Then you can use it like 那你可以像使用它一样
<mat-option *ngFor="let obj of optiontoeditlist | optFilter: 'selectedFirstOption'"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.