根据日期打开垫子扩展面板答案

【问题标题】：open mat-expansion-panel based on a date根据日期打开垫子扩展面板
【发布时间】：2019-05-06 17:23:15
【问题描述】：

我有一个材料扩展表列表，该列表是从从我的 API 服务检索到的数组创建的。我正在建立这样的列表：

<mat-expansion-panel>
<mat-expansion-panel-header>
    <mat-panel-title>
        {{roster.date}}
    </mat-panel-title>
</mat-expansion-panel-header>
<ul>
<li *ngFor="let y of roster.events">
    <div *ngIf="y.isFlight == false"><strong>{{y['startTimeLocal']}}</strong> {{y.Subject}}</div>
    <div *ngIf="y.isFlight == true"><strong>{{y['startTimeLocal']}}</strong> {{y.Subject}} <strong>{{y['endTimeLocal']}}</strong></div>
</li> 
</ul>

roster 是从父组件传入的。每个roster 都有三个元素，date, uuid, events 和events 是当天发生的另一组特定事件。

我想做的是在ngInit 打开与当前日期匹配的任何面板。我的问题是如何访问组件中的mat-expansion-panel 然后打开它？

我的想法是根据 uuid 为每个扩展面板添加一个 id 属性，然后循环遍历名册数组以查找匹配日期，然后打开面板。但是，我有点新，我很难理解以这种方式获取和访问元素。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

无需从您的组件访问mat-expansion-panel（可以使用@ViewChild），您只需使用mat-expansion-panel 的expanded 属性即可。

将您的组件更改为如下所示：

<mat-expansion-panel [expanded]="isPanelOpen(roster.date)">

并在您的组件中添加一个函数来确定是否应在特定日期打开扩展面板：

// Opens every panel for which the date has a "day" of 10
public isPanelOpen(date: Date): boolean {
  return date.getDate() === 10;
}

Here 是一个堆栈闪电战，它创建了一些 mat-expansion-panel's 然后打开标题中包含当前日期的那个。

【讨论】：