selectedOptions 未使用 ngModel 在 MatselectionList 上更新答案

【问题标题】：selectedOptions is not updating on MatselectionList with ngModelselectedOptions 未使用 ngModel 在 MatselectionList 上更新
【发布时间】：2021-08-03 10:21:03
【问题描述】：

我有不同类的 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"
   }
]

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

谢谢

【问题讨论】：

假设Classes 的值是一个静态数组，您的HTML 似乎是正确的。这意味着您的“.ts”或模板的其余部分是丘比特。为了获得更好的帮助，您需要分享更多代码。
你好@TheFabio 我已经更新了我的问题。谢谢您的快速答复。
@TheFabio 类是对象数组。

标签： angular angular-ngmodel

【解决方案1】：

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

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

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

【讨论】：

我已经尝试过了，但它不起作用。谢谢你的回答。
也许您可以添加 .ts 和 .html 文件的全部内容，因为我不清楚类的初始化位置。另外，“选择同一个学生”是什么意思？所选课程未在 ui 中更新？还是 selectedOptions 实际上根本没有更新？
我发现我的 uid 很长并且 ng-value-reflect 没有占用整个 id 的问题，这就是为什么它没有出现在 ng-reflect-model 中的原因。如果您有任何解决方案，请提出建议。