Передача асинхронного значения из родительского в дочерний компонент с помощью @Input

Question

Я пытаюсь передать карту, полученную из API, от родительского к дочернему компоненту в угловом формате 7.

parent.ts :

export class AppComponent {
  title = 'taurs-frontend';
  categories: any;
  isLoggedIn = false;

ngOnInit(){
    this.roomDataService.getData(`${environment.api_url}/api/Categories`)
    .subscribe(categories => {
      this.categories=categories
    }); 
  }

parent.html :

 <app-room-card [categories]="categories"></app-room-card> 

child.ts :

@Component({
  selector: 'app-room-card',
  templateUrl: './room-card.component.html',
  styleUrls: ['./room-card.component.css']
})
export class RoomCardComponent implements OnInit {
    @Input('categories') catname: any;

    ngOnInit() {
        console.log('aaa'+ this.catname);
    }
// ..
}

Когда я пытаюсь зарегистрировать переменную catname, это не определено .Если я пытаюсь импортировать переменную заголовок из родительского, все работает правильно.Как передать ребенку категории, заполнив их значениями из вызова API?

Answer 1

Вы пытаетесь передать асинхронные данные дочернему компоненту. У вас есть разные решения для этого. Например, вы можете использовать ngOnChanges вместо ngOnInit:

ngOnChanges() {
    console.log('aaa'+ this.catname);
}

Другое решение - использовать *ngIf, чтобы отложить инициализацию компонентов сообщений:

<app-room-card *ngIf="categories" [categories]="categories"></app-room-card>

Взгляните на эту ссылку: https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components#toc-solution-2-use-ngonchanges

Answer 2

Возможно, вам следует определить свой ввод таким образом, чтобы при немедленной загрузке атрибута обновлялся в дочернем компоненте:

  @Input('categories')
  set categories(value: any) {
    this._categories = value;
  }

Answer 3

Попробуйте изменить код компонента на

export class RoomCardComponent implements OnInit {
   @Input() categories: any; 
   ngOnInit() {
   console.log('aaa'+ this.categories);
   }
}

и иметь * ngIf на родительском компоненте, чтобы убедиться, что данные передаются потомку, как только вы получите ответ от своего API

<app-room-card *ngIf="categories" [categories]="categories"></app-room-card>