扩展面板内的垫选择列表

时间:2019-06-18 12:44:18

标签: css angular

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

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

我应该能够选择单个项目并添加到带有标题和选定项目的列表对象

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

不确定我为什么对此不赞成。

我当然找到了解决问题的方法,并希望能对某人有所帮助。