在自定义离子组件中使用* ngFor不起作用

Question

我有一个自定义的离子/角度成分，我将数据传递给@Input() posts: Post[]

import { Post } from './post';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss']
})
export class PostComponent implements OnInit {
  @Input() posts: Post[];
  post: Post;

  tests: [1, 2, 3];

  constructor() {}

  ngOnInit() {
    console.log(this.posts);
  }
}

这是我的自定义组件的components.module.ts：

import { IonicModule } from '@ionic/angular';
import { PostComponent } from './post/post.component';
import { EditprofilemodalComponent } from './editprofilemodal/editprofilemodal.component';
import { CommonModule } from '@angular/common';
@NgModule({
  declarations: [PostComponent, EditprofilemodalComponent],
  imports: [IonicModule, CommonModule],
  exports: [PostComponent, EditprofilemodalComponent]
})
export class ComponentsModule {}

由于某种原因，指令* ngFor将不显示任何内容：

<div>{{ posts[0].title }}</div>
<div *ngFor="let post of posts">{{ post.title }}</div>

但是做一个简单的<div>{{ posts[0].title }}</div>会起作用，那么ngFor怎么了？

谢谢！

Answer 1

您需要像这样将值传递给子组件。

 <app-post [posts]="posts"></app-post>

Answer 2

刚刚重新启动服务器，现在它就可以工作了！认为它无法识别components.module.ts

中的CommonModule