Использование * 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);
  }
}

. Это компоненты.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

Просто перезапустил мой сервер и теперь он работает! Думаю, он не распознал CommonModule в components.module.ts

Answer 2

Сначала проверьте, что у вас есть Poste в ngOnOInit()

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

, если его там нет, поэтому вы не прошли правильно, тогда проверьте

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

передать жестко зашитое значение в вашем .tsфайл

this.posts = [{"title":"title 1"},{"title":"title 1"},{"title":"title 1"}]

Answer 3

Вам нужно передать значение вашему дочернему компоненту следующим образом.

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