在Angular中是否有一种方法可以隐藏已经选择的Mat-select？

huangapple
go评论98阅读模式
英文:

Is there a way to hide already selected with Mat-select in angular

问题

我正在尝试确保在选择下拉框中的值后，它不应再出现在表单中，同样适用于第二个和第三个下拉框。

  1. // 我的 HTML
  2. <mat-form-field>
  3.   <mat-label>下拉框 1</mat-label>
  4.   <mat-select [(ngModel)]="selectedValue1">
  5.     <mat-option *ngFor="let arr of services" [value]="arr">
  6.       {{ arr }}
  7.     </mat-option>
  8.   </mat-select>
  9. </mat-form-field>
  11. <mat-form-field>
  12.   <mat-label>下拉框 2</mat-label>
  13.   <mat-select [(ngModel)]="selectedValue2">
  14.     <ng-container *ngFor="let arr of services">
  15.       <mat-option *ngIf="arr !== selectedValue1" [value]="arr">
  16.         {{ arr }}
  17.       </mat-option>
  18.     </ng-container>
  19.   </mat-select>
  20. </mat-form-field>
  22. <mat-form-field class="flex-auto">
  23.    <mat-select [(ngModel)]="selectedValue3">
  24.        <ng-container *ngFor="let arr of arrTmp">
  25.          <mat-option *ngIf="arr !== selectedValue1 && arr !== selectedValue2 && arr !== selectedValue3" [value]="arr.name">
  26.                {{arr.name}}
  27.          </mat-option>
  28.       </ng-container>
  29.   </mat-select>
  30. </mat-form-field>

问题在于第二个下拉框中的内容似乎仍然出现在第三个下拉框中，尽管有条件语句。

  1. // 您的 *.ts 控制器
  2. selectedValue1: string;
  3. selectedValue2: string;
  4. selectedValue3: string;
  5. 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

  1. // my html 
  2. &lt;mat-form-field&gt;
  3.   &lt;mat-label&gt;drop down 1&lt;/mat-label&gt;
  4.   &lt;mat-select [(ngModel)]=&quot;selectedValue1&quot;&gt;
  5.     &lt;mat-option *ngFor=&quot;let arr of services&quot; [value]=&quot;arr&quot;&gt;
  6.       {{ arr }}
  7.     &lt;/mat-option&gt;
  8.   &lt;/mat-select&gt;
  9. &lt;/mat-form-field&gt;
  11. &lt;mat-form-field&gt;
  12.   &lt;mat-label&gt;drop down 2&lt;/mat-label&gt;
  13.   &lt;mat-select [(ngModel)]=&quot;selectedValue2&quot;&gt;
  14.     &lt;ng-container *ngFor=&quot;let arr of services&quot;&gt;
  15.       &lt;mat-option *ngIf=&quot;arr !== selectedValue1&quot; [value]=&quot;arr&quot;&gt;
  16.         {{ arr }}
  17.       &lt;/mat-option&gt;
  18.     &lt;/ng-container&gt;
  19.   &lt;/mat-select&gt;
  20. &lt;/mat-form-field&gt;
  23. &lt;mat-form-field class=&quot;flex-auto&quot; &gt;
  24.    &lt;mat-select
  25.          [(ngModel)]=&quot;selectedValue3&quot;&gt;
  26.        &lt;ng-container *ngFor=&quot;let arr of arrTmp&quot;&gt;
  27.          &lt;mat-option *ngIf=&quot;arr !== selectedValue1 &amp;&amp; arr !== selectedValue2 &amp;&amp; arr !== selectedValue2&quot; [value]=&quot;arr.name&quot;&gt;
  28.                {{arr.name}}
  29.          &lt;/mat-option&gt; 
  30.       &lt;/ng-container&gt;
  31.   &lt;/mat-select&gt;
  32. &lt;/mat-form-field&gt;

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

  1. // your *.ts controller
  2. selectedValue1: string;
  3. selectedValue2: string;
  4. selectedValue3: string;
  5. public services = [&#39;Service 1&#39;, &#39;Service 2&#39;, &#39;Service 3&#39;];```
  7. </details>
  10. # 答案1
  11. **得分**: 1
  13. 你可以通过使用ngModel来访问下拉框1的选定选项，并在下拉框2上使用ngIf来拒绝选择它：
  15. ```html
  16. <mat-form-field>
  17.   <mat-label>下拉框1</mat-label>
  18.   <mat-select [(ngModel)]="selectedValue1">
  19.     <mat-option *ngFor="let arr of services" [value]="arr">
  20.       {{ arr }}
  21.     </mat-option>
  22.   </mat-select>
  23. </mat-form-field>
  25. <mat-form-field>
  26.   <mat-label>下拉框2</mat-label>
  27.   <mat-select [(ngModel)]="selectedValue2">
  28.     <ng-container *ngFor="let arr of services">
  29.       <mat-option *ngIf="arr !== selectedValue1" [value]="arr">
  30.         {{ arr }}
  31.       </mat-option>
  32.     </ng-container>
  33.   </mat-select>
  34. </mat-form-field>

在你的控制器中，你需要有以下变量：

  1. selectedValue1: string;
  2. selectedValue2: string;
  3. public services = ['Service 1', 'Service 2', 'Service 3'];

这是一个StackBlitz示例链接。

英文:

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:

  1. // your *.html
  2. &lt;mat-form-field&gt;
  3.   &lt;mat-label&gt;drop down 1&lt;/mat-label&gt;
  4.   &lt;mat-select [(ngModel)]=&quot;selectedValue1&quot;&gt;
  5.     &lt;mat-option *ngFor=&quot;let arr of services&quot; [value]=&quot;arr&quot;&gt;
  6.       {{ arr }}
  7.     &lt;/mat-option&gt;
  8.   &lt;/mat-select&gt;
  9. &lt;/mat-form-field&gt;
  11. &lt;mat-form-field&gt;
  12.   &lt;mat-label&gt;drop down 2&lt;/mat-label&gt;
  13.   &lt;mat-select [(ngModel)]=&quot;selectedValue2&quot;&gt;
  14.     &lt;ng-container *ngFor=&quot;let arr of services&quot;&gt;
  15.       &lt;mat-option *ngIf=&quot;arr !== selectedValue1&quot; [value]=&quot;arr&quot;&gt;
  16.         {{ arr }}
  17.       &lt;/mat-option&gt;
  18.     &lt;/ng-container&gt;
  19.   &lt;/mat-select&gt;
  20. &lt;/mat-form-field&gt;

In your controller you will need to have the variables available:

  1. // your *.ts controller
  2. selectedValue1: string;
  3. selectedValue2: string;
  4. public services = [&#39;Service 1&#39;, &#39;Service 2&#39;, &#39;Service 3&#39;];

Here is a stackblitz

答案2

得分: 0

你可以使用模板变量引用。
在第一个 mat-select 中添加一个 ngModel 和一个变量。然后在第二个 mat-select 中，你可以检查数组中的每个元素是否与这个变量不相等，只有当它们不相等时才显示。

  1. <mat-form-field>
  2.   <mat-select ngModel #firstService>
  3.     <mat-option *ngFor="let arr of services" [value]="arr">
  4.       {{ arr }}
  5.     </mat-option>
  6.   </mat-select>
  7. </mat-form-field>
  9. <mat-form-field>
  10.   <mat-select ngModel>
  11.     <ng-container *ngFor="let arr of services">
  12.       <mat-option *ngIf="arr !== firstService.value" [value]="arr">
  13.         {{ arr }}
  14.       </mat-option>
  15.     </ng-container>
  16.   </mat-select>
  17. </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.

  1. &lt;mat-form-field&gt;
  2.   &lt;mat-select ngModel #firstService&gt;
  3.     &lt;mat-option *ngFor=&quot;let arr of services&quot; [value]=&quot;arr&quot;&gt;
  4.       {{ arr }}
  5.     &lt;/mat-option&gt;
  6.   &lt;/mat-select&gt;
  7. &lt;/mat-form-field&gt;
  9. &lt;mat-form-field&gt;
  10.   &lt;mat-select ngModel&gt;
  11.     &lt;ng-container *ngFor=&quot;let arr of services&quot;&gt;
  12.       &lt;mat-option *ngIf=&quot;arr !== firstService.value&quot; [value]=&quot;arr&quot;&gt;
  13.         {{ arr }}
  14.       &lt;/mat-option&gt;
  15.     &lt;/ng-container&gt;
  16.   &lt;/mat-select&gt;
  17. &lt;/mat-form-field&gt;

huangapple
  • 本文由 发表于 2023年7月7日 05:01:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/76632511.html
  • angular
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定