typescript 选择后如何禁用垫选择选项

How to Disable Mat-Select Option once it has been selected

提问by Saad Ahmed

I have a mat-select and I want to disable the options once I have selected them. For eg: If I select Time then Time should be disabled in the Next mat-select. I have created a stackblitz https://stackblitz.com/edit/angular-anus7w?file=app%2Fselect-overview-example.tsof my requirement.Currently only the Key gets disabled. However in my case now the Drop down data will be dynamically generated and I cannot hard code the Values which need to be disabled.

我有一个 mat-select，一旦我选择了它们，我想禁用它们。例如：如果我选择时间，那么应该在下一个垫子选择中禁用时间。我创建了一个 stackblitz https://stackblitz.com/edit/angular-anus7w?file=app%2Fselect-overview-example.ts我的要求。目前只有 Key 被禁用。但是，在我的情况下，现在下拉数据将动态生成，我无法对需要禁用的值进行硬编码。

So what I want is that if I select a purticular value in mat-select 1 then that value should be disabled in mat-select 2. Similarly the value that I select

所以我想要的是，如果我在 mat-select 1 中选择一个特定的值，那么应该在 mat-select 2 中禁用该值。同样，我选择的值

回答by Roman Lytvynov

Please check my solution https://stackblitz.com/edit/angular-anus7w-9ovxqd?file=app%2Fselect-overview-example.ts

请检查我的解决方案https://stackblitz.com/edit/angular-anus7w-9ovxqd?file=app%2Fselect-overview-example.ts

I used Observable and an array property for store all chosen values

我使用 Observable 和一个数组属性来存储所有选择的值

Main ideas:

主要观点：

• Type.ts model file with constructorfor better interacting.
• For ease in templatei put selector in loop with index 'optI'. If you need to make selections with different data or logic you can write them as you did in your example. Please note, that mat-option get an Observable with Async pipe types$ | async
• All logic of component I described in comments

• 带有构造函数的 Type.ts 模型文件，以便更好地交互。
• 为了简化模板，我将选择器放入带有索引“optI”的循环中。如果您需要使用不同的数据或逻辑进行选择，您可以像在示例中那样编写它们。请注意，该 mat-option 使用异步管道获得 Observabletypes$ | async
• 我在评论中描述的组件的所有逻辑

回答by Chenna

You have first bind [(ngModel)]="firstOption"in the form and later do the validation. No change event is required here

您首先[(ngModel)]="firstOption"在表单中绑定，然后进行验证。这里不需要更改事件

In componentfile:

在component文件中：

firstOption = '';
secondOption = '';
thirdOption = '';
fourthOption = '';

In template html file

在模板 html 文件中

<h4>Basic mat-select</h4>
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="firstOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === secondOption.type ||
        type.text === thirdOption.type ||
        type.text === fourthOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="secondOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === firstOption.type ||
        type.text === thirdOption.type ||
        type.text === fourthOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="thirdOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === secondOption.type ||
        type.text === firstOption.type ||
        type.text === fourthOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="fourthOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === secondOption.type ||
        type.text === thirdOption.type ||
        type.text === firstOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />

回答by Alexis Rouan

    <mat-form-field>

      <mat-select [(value)]="selected" [placeholder]="!selected  ? 'Your custom placeholder' : ''">
        <mat-option value="1">Option 1</mat-option>
        <mat-option value="2">Option 2</mat-option>
        <mat-option value="3">Option 3</mat-option>
        <mat-option value="4">Option 4</mat-option>
        <mat-option value="5">Option 5</mat-option>
      </mat-select>

    </mat-form-field>