Angular 8：无法迭代我的帖子对象

Question

所以我开始研究本来应该是一个简单的建筑列表 *ngFor。

这是 AppComponent class 文件：

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>

Angular 8：无法迭代我的帖子对象

Angular 8: Unable to iterate over my posts object

angular

angular8

ngfor