Как использовать mat-list-option в mat-selection-list косвенно в угловом материале?

Question

Я сгруппировал список полномочий, чтобы улучшить ux, используя mat-extension-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 selected, у Авторизации есть отмеченные опции.Это функция selectionChange в файле .ts

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

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

Answer 1

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

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

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

Дляссылка: https://material.angular.io/components/list/api#MatSelectionList