当 ngif 添加到 mat-selection-list 时，数据绑定变得未定义

Question

我正在根据某些条件显示垫子选择列表。问题是在我添加 ngif 条件后，数据总是被设置为未定义。我似乎无法弄清楚是什么问题。预先感谢您的帮助：

我的模板：

<mat-card  *ngIf="!loading">
            <mat-card-header>
                <mat-card-title class="sub-title"><u>Events</u></mat-card-title>
            </mat-card-header>
            <mat-selection-list #event>
                <mat-list-option *ngFor="let event of listOfEvents" [value]="event.value" [selected]="event.selected" >
                    {{event.name}}
                </mat-list-option>
            </mat-selection-list>
        </mat-card>
        
                <button  (click)="save(event)" class="button" type="button" >Save</button>

我的ts代码：

            save(events: any): void {
    console.log(events); //coming as undefined
  }

Answer 1

要保持可初始化，Material select离子列表需要存在/被定义。您可以将 [hidden] 或您自己的 css class 与“display:none”一起使用，这样 material select 列表可以在后台初始化按钮。

[hidden]="loading" 而不是 *ngIf="!loading"

Answer 2

你应该使用 ViewChild

 @ViewChild('event') event;

当 ngif 添加到 mat-selection-list 时，数据绑定变得未定义

Data binding becomes undefined when ngif is added to mat-selection-list

angular-material

angular