Angular12遍历空数组提示Failed to compile错误是什么原因？

你遇到的编译错误通常是以下几个常见原因导致的，可逐一排查修正： #

原因1：mat-accordion的multi属性类型不匹配 #

mat-accordion的multi输入属性要求接收布尔类型，你当前写的multi="true"是传递了字符串类型的"true"，开启Angular严格模板类型检查时就会触发类型不匹配的编译错误。

修复方法： #

改成方括号绑定的布尔值：

<mat-accordion [multi]="true" *ngIf="posts.length > 0">
  <mat-expansion-panel *ngFor="let post of posts">
  <mat-expansion-panel-header>
  <mat-panel-title> {{ post.title }} </mat-panel-title>
  </mat-expansion-panel-header>
    <p>{{ post.content }}</p>
  </mat-expansion-panel>
</mat-accordion>

原因2：posts数组的类型声明/初始化不符合要求 #

有两种常见的错误场景：

1. 你没有给posts显式声明类型，且首次赋值为空数组posts = []，TypeScript会自动推断posts的类型为never[]，模板中访问post.title、post.content时，never类型不存在这些属性，触发类型错误。
2. 你只声明了数组类型没有初始化，比如只写了posts: {title: string, content: string}[];没有赋初始值，严格模式下TypeScript会认为posts可能为undefined，调用posts.length时会报「对象可能为undefined」的错误，部分旧版本的Angular模板类型检查器无法识别你写的*ngIf守卫逻辑。

修复方法： #

给posts显式声明类型并初始化空数组：

// 先定义Post类型接口
interface Post {
  title: string;
  content: string;
}
// 声明时指定类型+初始化空数组
posts: Post[] = [];

如果是旧版本Angular，可以把模板中的判断条件加上posts存在的校验，适配类型检查：

<mat-accordion [multi]="true" *ngIf="posts && posts.length > 0">

可选排查点：模板语法错误 #

你当前写的提示p标签内容是换行拆分的，极端情况下可能触发模板解析异常，可以改成单行文本验证：

<p class="mat-body-1" *ngIf="posts.length === 0">No posts added yet</p>

内容的提问来源于stack exchange，提问作者Guy reshef