открытая панель расширения мат на основе даты

Question

У меня есть список таблиц расширения материала, который создается из массива, полученного из моей службы 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 в компоненте, а затем открыть его?

Я подумал о том, чтобы добавить атрибут id к каждой панели расширения на основе uuid, затем перебрать массив списков, ищущих соответствующую дату, и затем открыть панель.Тем не менее, я немного новичок, и мне трудно понять, как получить и получить доступ к элементам таким образом.

Answer 1

Нет необходимости обращаться к 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, а затем открывает тот, который содержит текущую дату в заголовке.