Angular 如何创建角度mgl时间线条目'；我们开始扩张

我在尝试扩展

mgl时间线条目时遇到了一些问题，从一开始，我就找到了一些选项，如
切换
，
替代
，
焦点打开
和
侧边
，但似乎没有一个对我的需要有用

我该怎么做

我的代码在这里：

<mgl-timeline  [alternate]="alternate" [side]="side" [toggle]="toggle" [mobileWidthThreshold]="2440">
  <mgl-timeline-entry #timelineComponent *ngFor="let event of incidentEvents; let i = index">
    <mgl-timeline-entry-header>
      <div translate>
        incidents.details.card.incident.event
        <span>{{ event.event_type }}</span>
      </div>
      <div *ngIf="event.is_internal">
        <span translate>incidents.details.card.event.internal</span>
      </div>
    </mgl-timeline-entry-header>
    <mgl-timeline-entry-content style="display: block">
      <div>
        <div>
          <span class="font-bold" translate>incidents.details.card.incident.comments</span>
          <span>{{ event.description }}</span>
        </div>
        <div>
          <span class="font-bold" translate>incidents.details.card.incident.createdDate</span>
          <span>{{ event.incident_date }}</span>
        </div>
        <div *ngIf="event.attachment">
          <div class="font-bold" translate>incidents.details.card.incident.attachments</div>
          <div class="attachment-event" *ngFor="let attach of event.attachment" (click)="download(attach)">{{ attach }}</div>
        </div>
      </div>
    </mgl-timeline-entry-content>
    <mgl-timeline-entry-dot [size]="size" class="timeline-dot"></mgl-timeline-entry-dot>
    <mgl-timeline-entry-side>{{ timeSince(event.date_event) }} <span> ago</span></mgl-timeline-entry-side>
  </mgl-timeline-entry>
</mgl-timeline>


事件.详情.卡片.事件.事件
{{event.event_type}
事件.详细信息.卡片.事件.内部
事件.详情.卡片.事件.评论
{{event.description}}
事件.details.card.incident.createdDate
{{event.incident_date}
事件.详情.卡片.事件.附件
{{attach}}
{{timeSince（event.date_event）}年前
我刚刚在我的应用程序中实现了这一点，并遇到了同样的问题

我也找不到任何有用的属性/方法将“expanded”设置为“true”。我想出了一个解决办法（不是最干净的）

使用ngAfterViewInit生命周期挂钩，我添加了一个方法“expand（）

在本例中，我的条目是ngFor循环的一部分，我为每个标题分配了一个“id”。Use可以将其应用于圆点，两者都可以

<mgl-timeline-entry-header id="{{ 'entry' + i }}" class="header"
    (click)="onHeaderClick($event)">{{entry.date}} - {{entry.header}}</mgl-timeline-entry-header>

{{entry.date}-{{entry.header}

这个想法是，在条目加载后，您将指示通过编程方式“单击”每个标题/点

我不太喜欢document.getElementById，类似的解决方案可以通过ViewChild/ViewChildren实现

或使用：

  @ViewChildren("header", { read: ElementRef }) private headers: QueryList<ElementRef>;

  expandHeaders() {
    this.headers.forEach((header) => {
       header.nativeElement.click() });
  }

<mgl-timeline-entry-header #header class="header"
    (click)="onHeaderClick($event)">{{entry.date}} - {{entry.header}}</mgl-timeline-entry-header>

@ViewChildren（“header”，{read:ElementRef}）私有头：QueryList；
expandHeaders（）{
this.headers.forEach（（header）=>{
header.nativeElement.click（））；
}
{{entry.date}-{{entry.header}

希望这有帮助。如果您找到更好的解决方案/想法，请告诉我

  @ViewChildren("header", { read: ElementRef }) private headers: QueryList<ElementRef>;

  expandHeaders() {
    this.headers.forEach((header) => {
       header.nativeElement.click() });
  }

<mgl-timeline-entry-header #header class="header"
    (click)="onHeaderClick($event)">{{entry.date}} - {{entry.header}}</mgl-timeline-entry-header>