有角度,遍历嵌套组件

时间:2018-12-04 17:46:02

标签: angular nested angular6

我正在使用Angular 6,试图使用嵌套的组件和ngloop来写出硬编码的数据,但这不会让我失望。

我有一个帖子Post:

export class Post {
    title: string;
    constructor(title: string) {
        this.title = title;
    }
}

我在PostListComponent中创建了一个带有虚拟数据的帖子列表:

export class PostListComponent implements OnInit {

posts: Post[];

constructor() {
  this.posts = [
    new Post("title1"),
    new Post("title2"),
    new Post("title3"),
  ];
}

以及为此的html

<div class="card-container">
      <mat-card class="example-card" 
      *ngFor="let postToDisplay of posts">

        <display-post [post]="postToDisplay">
        </display-post>

      </mat-card>
    </div>
</div>

现在..我想将postToDisplay变量从循环传递到display-post组件,在这里我尝试将其写出来:

{{ post.title }}

和打字稿,只需输入即可非常简单:

export class DisplayPostComponent implements OnInit {

    @Input() post: Post;
}

我在开发人员控制台中收到此错误消息:

未捕获的错误:模板解析错误: 无法绑定到“发布”,因为它不是“显示发布”的已知属性。 1.如果“ display-post”是Angular组件并且具有“ post”输入,则请验证它是否属于此模块。

1 个答案:

答案 0 :(得分:2)

检查您在应用程序中是否正确导入了组件或模块。

这种错误主要是由工作空间中的未命中注入组件或模块引起的。