Динамически создавайте мат-гармошку, где новые элементы раскрываются по умолчанию

Question

У меня есть mat-accordion. Панели расширения происходят из списка, который со временем меняется. Когда добавляется новое значение, я бы хотел, чтобы оно было расширено по умолчанию. Моя текущая попытка в этом стеке блиц .

повторяется здесь:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-demo-one',
  templateUrl: './demo-one.component.html',
  styleUrls: ['./demo-one.component.scss']
})
export class DemoOneComponent implements OnInit {

  items = [
    { name: 'name1', value: 'value1' }
  ]

  constructor() { }

  ngOnInit() {
  }

  onAddItem() {
    this.items.push({name: 'new-item', value: 'new-value'});
  }

}

<mat-accordion>
  <mat-expansion-panel [expanded]="true" *ngFor="let item of items">
    <mat-expansion-panel-header>{{item.name}}</mat-expansion-panel-header>
    {{item.value}}
  </mat-expansion-panel>
</mat-accordion>
<button (click)="onAddItem()">Add Item</button>

Этот подход основан на https://github.com/angular/components/issues/6962, и это работает за исключением того, что создает ошибки обнаружения изменений:

preview-1fc37597e512f64998bbb.js:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-expanded: true'. Current value: 'mat-expanded: false'.

Answer 1

посмотрите на эту ссылку, я внес изменения, добавил ChangeDetectorRef для обнаружения изменений

stackblitz

спасибо