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

尝试将组件代码更改为

\Common
  \.vscode
    tasks.json
  \bin
  \obj
  Class1.cs
  Common.csproj

在父组件上设置* ngIf只是为了确保一旦您从API获得响应，就将数据传递给子组件

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

Answer 3

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

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

Answer 4

我遇到了同样的问题，我使用布尔类型的变量“ loading”进行了修复；

export class AppComponent {
  title = 'taurs-frontend';
  categories: any;
  isLoggedIn = false;
  loading:boolean = false; -> // my variable

ngOnInit(){
    this.loading = true; -> // true when the request starts 
    this.roomDataService.getData(`${environment.api_url}/api/Categories`)
    .subscribe(categories => {
      this.categories=categories
      this.loading = false; // false with the request ends
    }); 
  }

所以，用HTML

 <app-room-card *ngIf="!loading" [categories]="categories"></app-room-card> 
 // i used this variable to wait data of my parent component

我希望这可以解决您的问题或对其他人有所帮助。

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

4 个答案: