Question

我有一个组件，我想传递一个observable作为输入

<selective [source]="areasService.getSelectAreas()" placeholder="Select Items"></selective>

并在组件

中使用它

@Input() source;
ngOnInit(): void {
    this.searchField = new FormControl();
    this.selectiveForm = this.fb.group({
        search: this.searchField
    });
    console.log(this.source);

    this.sub = this.searchField.valueChanges
        .startWith('')
        .debounceTime(200)
        .flatMap(key => this.source)
        .subscribe((result) => {
            this.list = result.json().data.areas;
            this.countItems = this.list.length;
        });

}

但我收到此错误“类型'{}'上不存在属性'json'。”

如果我将服务区域Service注入组件并将其用作 this.areasService.getSelectAreas（）它工作正常

但如果我把它作为参数

传递，我就无法工作

Answer 1

我猜测getSelectAreas是异步的，这意味着在子组件上调用ngOnInit时，它不会返回任何数据。你可以通过实现ngOnChanges来解决这个问题，但这可能不是最好的解决方案：

请注意，将函数调用绑定到组件通常不是一个好主意，因为它将永远称为。我要将areasService.getSelectAreas()解包到控制器中的值，或者如果areasService.getSelectAreas()是Promise或Observable，您可以使用async管道进行Angular解包对你而言，就像这样：

<selective [source]="areasService.getSelectAreas | async" placeholder="Select Items"></selective>

如果它返回Promise或Observable，只需将该返回值赋给组件中的变量，并将其与异步管道绑定。

Angular - 将一个Observable传递给@Input

1 个答案: