*ngFor 指令不适用于垫扩展面板。需要解决方案答案

【问题标题】：*ngFor directive isn't working with mat-expansion panel. Need solution*ngFor 指令不适用于垫扩展面板。需要解决方案
【发布时间】：2023-02-13 14:19:58
【问题描述】：

当我在我的 html 文件中添加带有 mat-expansion 面板的 *ngFor 时，它无法正常工作。我删除它的那一刻，它工作正常。以下是文件的一些屏幕截图。

我尝试过使用和不使用 *ngfor 以及不使用它，都可以，但是使用它就不行。

网页格式

<mat-accordion>
    <mat-expansion-panel *ngFor = "let post of posts">
        <mat-expansion-panel-header>
        {{ post.title }}
        </mat-expansion-panel-header>
       {{ post.content }}
    </mat-expansion-panel>
</mat-accordion>

文件

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

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  posts : [
    { title : "this is first title" , content : "This is 1 content" },
    {title : "this is second title", content : "This is 2 content"},
    {title : "this is third title", content : "This is 3 content"}
  ];
}

当我在我的 html 文件中添加带有 mat-expansion 面板的 *ngFor 时，它无法正常工作。我删除它的那一刻，它工作正常。以下是文件的一些屏幕截图。

我尝试过使用和不使用 *ngfor 以及不使用它，都可以，但是使用它就不行。

【问题讨论】：

标签： html angular angular-material

【解决方案1】：

您以错误的方式定义了 post 数组。 : 用于声明属性类型，因此请改用=

posts = [ 
    { title : "this is first title" , content : "This is 1 content" },
    {title : "this is second title", content : "This is 2 content"},
    {title : "this is third title", content : "This is 3 content"}
  ];

【讨论】：