Question

让我们讨论代码概述，我已经在多复选框垫选择角材料中绑定了学生姓名。默认情况下，我已经绑定了前三个学生。在初始加载应用程序时，我们可以看到默认情况下选中了三个学生复选框。

应用程序还有另一个条件：用户可以从所有学生列表中选择任意一个，并且只能选择三个学生；如果用户试图选择三个以上学生，则我将显示警告消息“最多可以选择3个学生！”

 <mat-form-field>
          <mat-select placeholder="Select Student"
                      [formControl]="studentdropdownsControl" multiple>
            <mat-option *ngFor="let student of studentdropdowns" [value]="student.value"
              (click)="studentdropdown($event,student,studentdropdownsControl)">
              {{student.value}}
            </mat-option>
          </mat-select>
  </mat-form-field>

 studentdropdownsControl = new FormControl();
   selectedstudent =[];
   studentdropdowns = [{value: "Rickey",  id: 0},{value: "JohnSon", id: 1},{value: "Salmon",  id: 2},{value: "vickey", id: 3},{value: "Jony",  id: 4}, {value: "Rock/679",  id: 5},{value: "Batista/641", id: 6},{value: "Sunny/859",  id: 7},{value: "Eliza/1090", id: 8}]

  ngOnit()
  {
    this.getstudentCallsdropdown();
  }


   public async getstudentCallsdropdown(): Promise<void> {

        {
          // Logic to bind by default three student checkbox in dropdown on intial loading 
          this.studentdropdownsControl = new FormControl([this.studentdropdowns[0].value, this.studentdropdowns[1].value, this.studentdropdowns[2].value]);
        }

  }

   public studentdropdown(event: MatOptionSelectionChange, value: string, selectedstudent: any): void {

   //selectedstudent is nothing but value of select and deselect checkbox.
    this.selectedstudent = selectedstudent.id;

     if (this.selectedstudent.length > 3) {
      this.studentdropdownsControl = new FormControl([this.selectedstudent[0], this.selectedstudent[1], 
      this.selectedstudent[2]]);
      alert("Maximum of 3 Studentcan be selected!");
    }
  }

现在让我们在上图中讨论问题，我正在尝试选择vickey，是的，我无法选择。完美！条件（如果（this.selectedstudent.length> 3））工作正常，但现在看下面的图片

点击Windows警报的确定

我已经选择了三个学生，现在当我尝试选择鲑鱼时，这里的条件（如果（this.selectedstudent.length> 3））失败，并且能够选择或标记对鲑鱼的检查，并且有趣的是它被取消选择了Vickey自动。因此，通过与其他学生核对，我发现了“从上侧（顶部）到下侧（底部）我的状况很好，并且从下侧（底部）到上侧（顶部）”。 < / p>

为什么这种情况缺少某些东西？或其在数组中绑定元素的问题，或者它是表单控件的怪异行为。

Answer 1

当您选择已经选择了第4个的3dr学生时，它会选择它，然后在您的函数中检查是否有最多3个学生，然后选择第三个被选中的学生。

      new FormControl([this.selectedstudent[0], this.selectedstudent[1], this.selectedstudent[2]]);

从第一个到最后一个顺序排列，因此您将取消选择第四个，而不是刚刚选择的一个（第三个）。

您不应该这样做，没有理由每次都创建一个新的表单控件。您应该使用ngModel，它将保存所选项目的列表。您可以修改ngModel以防止选择更多内容。（请注意，您需要对其进行突变以使其得到更新。）请参见示例：https://stackblitz.com/edit/angular-sobw4u

  change(topping: string): void {
      console.log(this.selectedToppings);
      if(this.selectedToppings.length > 3) {
        this.selectedToppings = this.selectedToppings.filter(e => e !== topping);
      }
  }

Answer 2

很简单！只需从 selectedstudent 数组中删除那些额外需要选择的学生，即可为您找到或给额外选择的学生提供索引

 public studentdropdown(event: MatOptionSelectionChange,newexstrastudent: string, value: string, selectedstudent: any): void {

   //selectedstudent is nothing but value of select and deselect checkbox.
    this.selectedstudent = selectedstudent.id;
   
     if (this.selectedstudent.length > 3) {
     let selectedstudentindex = this.selectedstudent.findIndex(res => { return res == newexstrastudent });
     this.selectedstudent.splice(selectedstudentindex, 1);
     this.studentdropdownsControl = new FormControl([this.selectedstudent[0], this.selectedstudent[1], 
     this.selectedstudent[2]]);
     alert("Maximum of 3 Studentcan be selected!");
    }
    
}

FormControl在垫子多选-角材料中无法正常工作

2 个答案: