如何根据条件从垫选择中禁用选项答案

【问题标题】：How to disable Option from mat-select based on Condition如何根据条件从垫选择中禁用选项
【发布时间】：2019-04-08 07:30:05
【问题描述】：

我选择了两个 mat-select，在第一个中我选择客户个人或组织客户的类型。如果用户选择 Ind Customer，我会显示另一个 mat-select。但是，问题在于第二个 mat-select 下拉选项我想禁用某些输入字段。我怎样才能做到这一点？

选择客户类型的 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>

打字稿代码：

custType: any[] = [{ value: 'indCust', viewValue: 'IndividualCustomer' }, { value: 'orgCust', viewValue: 'Organizational Customer' }];

第二个下拉 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>

第二个下拉菜单的打字稿代码：

  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'}
];

如果用户在第一个下拉列表中选择组织客户，我想从第二个下拉列表中禁用/隐藏个人客户选项，如果用户在第一个下拉列表中选择个人客户，我想从第二个下拉列表中禁用/隐藏 OrganazationalCustomer。

【问题讨论】：

标签： html typescript angular7

【解决方案1】：

您可以为您的第二个选项列表实现管道，如下所示

@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
   }
 }

那么你就可以像这样使用它了

<mat-option *ngFor="let obj of optiontoeditlist | optFilter: 'selectedFirstOption'"

【讨论】：