英文:
Is there a way to hide already selected with Mat-select in angular
问题
我正在尝试确保在选择下拉框中的值后，它不应再出现在表单中，同样适用于第二个和第三个下拉框。
// 我的 HTML
<mat-form-field>
<mat-label>下拉框 1</mat-label>
<mat-select [(ngModel)]="selectedValue1">
<mat-option *ngFor="let arr of services" [value]="arr">
{{ arr }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>下拉框 2</mat-label>
<mat-select [(ngModel)]="selectedValue2">
<ng-container *ngFor="let arr of services">
<mat-option *ngIf="arr !== selectedValue1" [value]="arr">
{{ arr }}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
<mat-form-field class="flex-auto">
<mat-select [(ngModel)]="selectedValue3">
<ng-container *ngFor="let arr of arrTmp">
<mat-option *ngIf="arr !== selectedValue1 && arr !== selectedValue2 && arr !== selectedValue3" [value]="arr.name">
{{arr.name}}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
问题在于第二个下拉框中的内容似乎仍然出现在第三个下拉框中，尽管有条件语句。
// 您的 *.ts 控制器
selectedValue1: string;
selectedValue2: string;
selectedValue3: string;
public services = ['Service 1', 'Service 2', 'Service 3'];
英文:
I am trying to ensure that after a value is selected in a drop down, it should not appear again in the form, also with the second and third
// my html
<mat-form-field>
<mat-label>drop down 1</mat-label>
<mat-select [(ngModel)]="selectedValue1">
<mat-option *ngFor="let arr of services" [value]="arr">
{{ arr }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>drop down 2</mat-label>
<mat-select [(ngModel)]="selectedValue2">
<ng-container *ngFor="let arr of services">
<mat-option *ngIf="arr !== selectedValue1" [value]="arr">
{{ arr }}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
<mat-form-field class="flex-auto" >
<mat-select
[(ngModel)]="selectedValue3">
<ng-container *ngFor="let arr of arrTmp">
<mat-option *ngIf="arr !== selectedValue1 && arr !== selectedValue2 && arr !== selectedValue2" [value]="arr.name">
{{arr.name}}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
The problem here is that what i have in the second drop down, appears in the third drop down in spit of the condition statement
// your *.ts controller
selectedValue1: string;
selectedValue2: string;
selectedValue3: string;
public services = ['Service 1', 'Service 2', 'Service 3'];```
</details>
# 答案1
**得分**: 1
你可以通过使用ngModel来访问下拉框1的选定选项，并在下拉框2上使用ngIf来拒绝选择它：
```html
<mat-form-field>
<mat-label>下拉框1</mat-label>
<mat-select [(ngModel)]="selectedValue1">
<mat-option *ngFor="let arr of services" [value]="arr">
{{ arr }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>下拉框2</mat-label>
<mat-select [(ngModel)]="selectedValue2">
<ng-container *ngFor="let arr of services">
<mat-option *ngIf="arr !== selectedValue1" [value]="arr">
{{ arr }}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
在你的控制器中，你需要有以下变量：
selectedValue1: string;
selectedValue2: string;
public services = ['Service 1', 'Service 2', 'Service 3'];
英文:
You can prevent the selected option of drop down 1 from being selectable in drop down 2 by accessing it via the ngModel and decline it on the drop down 2 with ngIf:
// your *.html
<mat-form-field>
<mat-label>drop down 1</mat-label>
<mat-select [(ngModel)]="selectedValue1">
<mat-option *ngFor="let arr of services" [value]="arr">
{{ arr }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>drop down 2</mat-label>
<mat-select [(ngModel)]="selectedValue2">
<ng-container *ngFor="let arr of services">
<mat-option *ngIf="arr !== selectedValue1" [value]="arr">
{{ arr }}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
In your controller you will need to have the variables available:
// your *.ts controller
selectedValue1: string;
selectedValue2: string;
public services = ['Service 1', 'Service 2', 'Service 3'];
答案2
得分: 0
你可以使用模板变量引用。
在第一个 mat-select 中添加一个 ngModel 和一个变量。然后在第二个 mat-select 中，你可以检查数组中的每个元素是否与这个变量不相等，只有当它们不相等时才显示。
<mat-form-field>
<mat-select ngModel #firstService>
<mat-option *ngFor="let arr of services" [value]="arr">
{{ arr }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select ngModel>
<ng-container *ngFor="let arr of services">
<mat-option *ngIf="arr !== firstService.value" [value]="arr">
{{ arr }}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
英文:
You can use a template variable reference.
Add a ngModel and a variable to the first mat-select. And then in your second mat-select you can check each spot from the array against this variable. And only show if its not equal.
<mat-form-field>
<mat-select ngModel #firstService>
<mat-option *ngFor="let arr of services" [value]="arr">
{{ arr }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select ngModel>
<ng-container *ngFor="let arr of services">
<mat-option *ngIf="arr !== firstService.value" [value]="arr">
{{ arr }}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论