Question

我正在根据我从服务器收到的数组重复材质角度选择框：

<div *ngFor="let routeval of routemodeArray;let i=index"  layout-gt-xs="row">
<div>
 <mat-form-field>
   <mat-select placeholder="Select Route" [(ngModel)]="routeval.routeId" name="routeName{{i}}" (change)="routeCheck(routeval.routeId, i, $event)" required >
     <mat-option [value]="null">Select Route</mat-option>
     <mat-option [value]="route.id" *ngFor="let route of getallRoute" [disabled]="routecheckValue == false">{{route.destination}}</mat-option>
   </mat-select>
   <mat-error *ngIf="routeval.routeId == null">This field is required</mat-error>

 </mat-form-field>

</div>

这是更改选择框时执行的功能

routecheck(routeval, position, eventData: MatSelectChange){
   console.log(routeval);
   console.log('Route check val');
   console.log(this.routecheckValue);
   console.log(eventData);
   for (let i=0;i<this.routemodeArray.length;i++){
     if (position!=i){
       if(this.routemodeArray[i].routeId == routeval){
         this.routecheckValue = false;
         console.log(this.routecheckValue);
         console.log(this.routemodeArray[i].routeId);
       }
       else{
         this.routecheckValue = true;
       }
     }

   }

 }

我会得到多个带有多个选项的选择框，这些选项在所有选择框中都是相同的

现在，当我在选择框中选择一个选项时，应该在所有其他选择框中禁用此选项

我无法知道如何禁用它们，因为选择框和它们内部的垫子选项也会重复

注意：我不能使用jQuery，因为我不允许在m项目中使用。因此，它应该与angularcript一起以角度进行。

提前致谢：）

Answer 1

This是一个完整的示例，其行为符合要求，只需跟踪到目前为止已访问的选择器，以及它们当前显示的选项。

Answer 2

现在，当我在选择框中选择一个选项时，此选项应为在所有其他选择框中禁用

<强>更新：这件事情CODE EXAMPLE

如何为选择框添加验证，以便多个选择框

2 个答案: