时间戳

首页 > 解决方案 > 根据日期打开垫子扩展面板

angular - 根据日期打开垫子扩展面板

问题描述

我有一个从我的 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 属性，然后循环遍历名册数组以查找匹配日期，然后打开面板。但是，我有点新，我很难理解以这种方式获取和访问元素。

标签： angularangular-material

解决方案

无需mat-expansion-panel从您的组件访问 （可以使用@ViewChild），您可以简单地使用expanded.mat-expansion-panel

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

<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;
}

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

推荐阅读