css - 扩展面板内的垫子选择列表

Question

我需要在扩展中创建一个带有复选框的选择列表 扩展面板

<mat-expansion-panel *ngFor="let item of Dataseource">
  <mat-expansion-panel-header style="display:flex" class="mat-row">
    {{datasource.showheader}}
  </mat-expansion-panel-header>
  <div *ngFor="let match of Datasource; let i= index">

                      <mat-selection-list  [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
                            <mat-list-option [value]="match">
                              <div class="container-name">
                                <div class="col-6">{{match.Name }}  vs {{ match.Address }}</div>
                              </div>
                              <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
                            </mat-list-option>
                          </mat-selection-list>
    </div>
  </div>
</mat-expansion-panel>

我应该能够选择单个元素并添加到带有标题和所选元素的列表对象

Answer 1

<mat-expansion-panel *ngFor="let item of Datasource">
  <mat-expansion-panel-header style="display:flex" class="mat-row">
    {{item.Name}}
  </mat-expansion-panel-header>

                      <mat-selection-list ngFor="let match of item.match; let i= index;" [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
                            <mat-list-option *ngFor="let match of item.match" [value]="match">
                              <div class="container-name">
                                <div class="col-6">{{match.Name }}  vs {{ match.Address }}</div>

                              </div>

                            </mat-list-option>
                          </mat-selection-list>

      </div>

      <hr>
</mat-expansion-panel>