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;
)

多个垫选择列表的双向数据绑定

1 个答案: