Angular дочерний компонент обновляется, но не просмотреть, пока не щелкнет в любом месте

Question

Обновление дочернего компонента. Но он появляется, когда я нажимаю где-нибудь в окне.

Parent.component.ts

selectedId: string

Parent.component. html

<div>
  <child-component [id]="selectedId"></child-component>
</div>

Дочерний компонент делает то, что должен делать. но я вижу обновленное представление, когда нажимаю второй раз (первый щелчок предназначен для открытия всплывающего окна и отправки нового selectedId дочернему элементу). Он отображается с предыдущим идентификатором до щелчка. Как обновить sh вид?

child.component.ts

@Input()
  selectedId: string;

comments: Comments[];

 ngOnChanges() {
    if (this.selectedId) {
      this.commentService
        .getCommentsById(this.selectedId)
        .subscribe(comments => {
          this.comments = comments;
          this.comments.reverse();
        });
    }
  }

Answer 1

В функции ngOnChanges() вам нужно принять аргумент changes: SimpleChanges в качестве входных данных, как показано ниже.

ngOnChanges(changes: SimpleChanges) {
  if (changes.selectedId.currentValue) {
    this.loadComments(changes.selectedId.currentValue);
  }
}

loadComments(id) {
  this.commentService.getCommentsById(id).subscribe(comments => {
    this.comments = comments;
    this.comments.reverse();
  });
}

Наряду с этим добавьте канал async везде, где вы используете comments вот так {{ comments | async }}

Это всегда будет загружать компонент с обновленными данными.