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

My ts code:

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

Answer 1

要保持可初始化，需要存在/定义材质选择列表。你可以使用[hidden]或者你自己的css类"display:none"因此材料选择列表可以初始化背景中的按钮。

[隐藏]="loading"而不是*ngIf="!loading">

Answer 2

你应该使用ViewChild

@ViewChild('event') event;