时间戳

首页 > 解决方案 > selectedOptions 未使用 ngModel 在 MatselectionList 上更新

angular - selectedOptions 未使用 ngModel 在 MatselectionList 上更新

问题描述

我有不同类的 MatSelectionList。当我第一次选择课程时，它会将学生关联到该课程中。

这工作正常，但问题是当我再次进入对话框并选择已经选择课程的学生然后未选中现有课程的复选框时。

我将关联的类 id 推送到 selectedOptions 中。selectedOptions 包含值，但它不更新 Ui。

HTML 内容

<mat-selection-list [(ngModel)]="selectedOptions" ngDefaultControl>
  <mat-list-option *ngFor="let class of Classes" [value]="class.class_id">
    {{class.ClassName}}
  </mat-list-option>
</mat-selection-list>

组件内容

@Component(...)
export class MyComponent { 
  
  selectedOptions: string[] = [];

  constructor(private service:StudentService){
    this.service.getStudentElement().subscribe((result)=> {
      this.selectedStudents.forEach((student) => {
        this.filteredStudents = result.filter(studentElement => {
          return studentElement.student == student.uid;
        });
      this.associatedClassForSelectedStudents(this.filteredStudents);
    })
  })

  associatedClassForSelectedStudents(selectedStudents: any){
    selectedStudents.forEach(element=> {
      if(element.class){
        this.selectedOptions.push(element.class)
      }
    })
  }

}

this.service.getStudentElement()订阅者发出的值：

[
  {
    student: "261a134847d-e814379eaea6"
    uid: "9dd97ede-8943-b8f471317d14"
    class: "11111111-ee9d-ed1401907fa9"
   }
]

谁能告诉我我做错了什么？

谢谢

标签： angularangular-ngmodel

解决方案

它this.selectedOptions.push(element.class)没有改变对的引用，selectedOptions这就是为什么它没有被视为更改并且所选类没有更新的原因。

您可以尝试使用concat将创建一个新数组的方法：

this.selectedOptions = this.selectedOptions.concat(element.class)

推荐阅读