动态创建一个 mat-accordion，其中默认扩展新项目

Question

我有一个mat-accordion。扩展面板来自随时间变化的列表。添加新值时，我希望它默认扩展。我在这个stack blitz 有我目前的尝试。

在此重复：

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

谢谢