Angular 8：无法遍历我的帖子对象

Question

因此，我开始使用 *ngFor 制作本应简单的建筑清单。

这是AppComponent 类文件：

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  posts = [
    {
      title: "Neat Tree",
      imageUrl: "assets/tree.jpeg",
      username: "nature",
      content: "I saw this neat tree today",
    },
    {
      title: "Snowy Mountain",
      imageUrl: "assets/mountain.jpeg",
      username: "mountainlover",
      content: "Here is a picture of a snowy mountain",
    },
    {
      title: "Mountain Biking",
      imageUrl: "assets/biking.jpeg",
      username: "biking1222",
      content: "I did some biking today",
    },
  ];
}

然后在app.component.html 文件中我重构了它：

<app-card>
  *ngFor="let post of posts" [title]="post.title" [imageUrl]="post.imageUrl"
  [username]="post.username" [content]="post.content"
</app-card>

应该是这样，我应该像以前一样看到我的三个不同的卡片组件，但是我看到了一个损坏的卡片组件。终端没有错误，控制台没有错误。我被难住了。

Answer 1

你的标记是错误的。需要将标签移近属性后

<app-card
  *ngFor="let post of posts" [title]="post.title" [imageUrl]="post.imageUrl"
  [username]="post.username" [content]="post.content">
</app-card>