无法将数据从父组件传递到子组件

Question

你对下面这个奇怪的问题有什么想法吗？

我正在将数据从父组件传递到子组件，该子组件从服务方法返回，将数据返回为Observable<DemoModel>。但是，在加载子组件时，数据未定义，仅在ngAfterViewInit 之后填充（我也尝试过通过此方法获取数据，但数据仍然未定义）。所以，我也尝试应用一些ngOnchanges 方法，但问题更多与从父组件检索到的数据在子组件加载时尚未准备好（我也尝试使用异步等而不是订阅。在加载子组件时我应该如何获取数据以使其准备就绪？

父子组件如下图：

家长比较

<child-component
    [courses]="courses|async" 
>
</child-component>



courses: any;

this.service.listCourses().subscribe((course: Course) => {
  this.courses = course;
});

儿童补偿

private courses: any;

@Input()
set data(data: any) {
    this.courses.next(data);
}

myControl = new FormControl('');

ngAfterViewInit() {

  // >>> THIS THROWS ERROR AS this.courses is undefined
  this.myControl.setValidators([
    Validators.required,
    forbiddenNamesValidator(this.courses)
  ]);
}

我也尝试在html中使用一些*ngIf，但是由于方法中使用了this.courses参数，因此检查html中的数据没有任何意义。

这个问题可能是subscribe方法引起的，不过我也试过用promise（不知道是不是用对了）。

Answer 1

您当前的实现存在一些问题：

• 在您的父组件中，课程是一个数组（我假设）不是可观察的 - 无需使用 async 管道
• 在您的 Child 组件中，您已将输入字段命名为 data，并使用 setter 对应为数组的变量调用 .next - 即 .next 将不存在。

下面应该修复你当前的实现

家长比较

<child-component
    [courses]="courses" 
>
</child-component>

courses: any;

this.service.listCourses().subscribe((course: Course) => {
  this.courses = course;
});

儿童补偿

@Input() courses: any;

需要注意的是listCourses 是异步的

这意味着courses 在调用ngAfterViewInit 时不一定保证有一个值，并且可能会抛出类似的错误。

我可以建议解决以下问题：

<child-component
    *ngIf="courses?.length"
    [courses]="courses" 
>
</child-component>

您不必等待ngAfterViewInit，而只需等待ngOnInit。

ngOnInit(): void {
    this.myControl.setValidators([
        Validators.required,
        forbiddenNamesValidator(this.courses)
    ]);
}

评论

将列表从父母传递给孩子，我应该使用可观察/承诺/数组等吗？

这完全取决于你，我更喜欢在处理 observables 时使用 async 管道，因为这样我就不必担心取消订阅了。

<child-component
    [courses]="courses | async" 
>
</child-component>

courses = this.service.listCourses()

我认为子组件中的课程不需要使用get/set，因为列表不会改变

在处理发生变化的数据时，您甚至不需要使用 get/set。 Angular 将为您更新 @Input 数据，因此您无需担心使用 get/set，除非您明确需要该功能。

我应该调用this.myControl.setValidators([]} 和onInit 或afterViewInit 中的过滤方法

无需将验证器设置为您的afterViewInit，您无需等待组件的视图初始化后再设置验证器。

Answer 2

第一种方式：添加ngIf查看是否有数据。

<child-component [courses]="courses" *ngIf="courses.length > 0"> </child-component>

第二种方式：如果你想使用async，那么不要在你的组件中订阅它。

<child-component [courses]="courses$ | async" *ngIf="(courses$| async)?.length > 0"> </child-component>

组件：

courses$: Observable<any>;

this.courses$ = this.service.listCourses().pipe(shareReplay());