Блог

Я сгруппировал список полномочий, чтобы улучшить ux, используя mat-expansion-panel для каждой группы, чтобы сделать группы сворачиваемыми. Но при установке флажка некоторые параметры mat-selection-list не меняются. Это html-файл:

 <mat-selection-list *ngIf="!formProperty.root.schema.readOnly" #list [(ngModel)]="selectedAuthority"
                                        (selectionChange)="selectionChange($event)">
    <div *ngFor="let key of objectKey(groupedAuthorities())">
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title matSubheader>
                    <h3 translate>app.{{key}}.home.title</h3>
                </mat-panel-title>
            </mat-expansion-panel-header>
            <mat-list-option [value]="authority" *ngFor="let authority of groupedAuthorities()[key] ; let i = index;">
                <p AuthorityTranslate>
            {{authority.name}}
                </p>
            </mat-list-option>
        </mat-expansion-panel>
    </div>
</mat-selection-list>
  

Когда я нажимаю на флажок, вызывается SelectionChange ($ event), но selectedAuthority — это пустой список. Хотя, если mat-list-option находится сразу после mat-selection-list, selectedAuthority содержит отмеченные параметры.
Это функция SelectionChange в файле .ts

 public selectionChange(authorities: IAuthority[]): void {

    this.formProperty.setValue(authorities, false);
}
  

Здесь вы вводите событие приведения типа MatSelectionListChange к IAuthority[].

 (selectionChange)="selectionChange($event.source.selectedOptions)"
  

Это вернет selectionModel , вам все равно придется преобразовать его в IAuthority[].

Для справки: https://material.angular.io/components/list/api#MatSelectionList