使用@Input将异步值从父组件传递到子组件

Question

我试图以角度7传递一个来自api的地图，从父到子组件。

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

尝试更改组件代码，

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> 

Answer 3

也许您应该以这种方式定义输入，因此在子组件中更新时立即更新属性：

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