多个 mat-selection-list 的两种方式数据绑定

Question

我有来自服务的组列表，并为所有组创建多项选择列表。

每个组都有一个模板列表，就像数组中的数组一样。

我的代码

<mat-expansion-panel *ngFor="let group of groups">
  <mat-expansion-panel-header>
     <mat-panel-title>
       {{group.name}}
     </mat-panel-title>
  </mat-expansion-panel-header>
<mat-selection-list role="list" 
        [(ngModel)]="selectedTemplates" 
        [ngModelOptions]="{standalone: true}" 
        (selectionChange)="checkSelection($event)">
  <mat-list-option [value]="template" 
                   [checkboxPosition]="before" 
                  *ngFor="let template of group.templates">{{template.name}} 
  </mat-list-option>
</mat-selection-list>
</mat-expansion-panel>

TS

selectedTemplates: Array<TemplateType> =[];

this.serviceCall.subscribe( res => {
    this.selectedTemplates = res;
)

当我点击列表中的一个项目时，它们会显示在一个垫子上，并且这样做没有任何问题。

在桌子上，每一行都有一个按钮可以删除我的选择。

单击按钮时如何取消选中列表项

谢谢

Answer 1

我已经弄清楚了，我的数据绑定错误。

<mat-expansion-panel *ngFor="let group of groups; let i = index">
  <mat-expansion-panel-header>
     <mat-panel-title>
       {{group.name}}
     </mat-panel-title>
  </mat-expansion-panel-header>
<mat-selection-list role="list" 
        [(ngModel)]="selectedGroups[i].templates" 
        [ngModelOptions]="{standalone: true}" 
        (selectionChange)="checkSelection($event)">
  <mat-list-option [value]="template" 
                   [checkboxPosition]="before" 
                  *ngFor="let template of group.templates">{{template.name}} 
  </mat-list-option>
</mat-selection-list>
</mat-expansion-panel>

TS

selectedGroups: Array<GroupType> =[];

this.serviceCall.subscribe( res => {
    this.selectedGroups= res;
)