在我的组件中，我使用了一个@Input，它是可观察类型。在视图中，我使用|async管道来处理可观察流的订阅和取消订阅。在组件中，我试图管道这个可观察对象在流上执行一些突变。然而，管道内的映射函数永远不会被触发。
data.组件. ts：
@Component({
selector: 'data',
template: `<div *ngFor="let item of (data$ | async)">{{item}}</div>`
})
export class DataComponent implements OnInit {
@Input()
data$: Observable<IData>;
constructor() {}
ngOnInit() {
this.data$
.pipe(
map(next => {
// do some data mutation
// never getting in here
})
)
}
}
现在管道中的map函数永远不会被触发，因此不会按预期改变数据。期望的结果是数据突变发生在map函数内部。
您需要在组件内部订阅this.data$。
this.data$.subscribe((data) => {
//do data mutation
// assign it to a local variable, say this.data
})
除此之外，如果您希望在模板中使用突变，您还可以将突变的数据分配给局部变量并在模板中使用它。
看起来是这样的：
@Component({
selector: 'data',
template: `<div *ngFor="let item of mutatedData">{{item}}</div>`
})
export class DataComponent implements OnInit {
@Input()
data$: Observable<IData>;
mutatedData: IData;
constructor() {}
ngOnInit() {
this.data$.subscribe((data) => {
//do mutatation
//assign mutated data to this.mutatedData
});
}
}
更新：由于OP打算在组件中避免订阅，这里有一个想法：注意：你也可以编写一个自定义管道来执行此操作，但现在，考虑一下：
@Component({
selector: 'data',
template: `<div *ngFor="let item of mutatedData">{{mutate(item)}}</div>`
})
export class DataComponent implements OnInit {
@Input()
data$: Observable<IData>;
mutate(data: any): any{
//data mutation
//return updated data
}
}
为了避免订阅和取消订阅热门可观察对象，可以使用以下方法：
@Component({
selector: 'data',
template: `<div *ngFor="let item of (dataMutate$ | async)">{{item}}</div>`
})
export class DataComponent implements OnInit {
@Input()
data$: Observable<IData>;
dataMutate$: Observable<IData>;
constructor() {}
ngOnInit() {
this.dataMutate$ = this.data$
.pipe(
map(next => {
// do some data mutation
// never getting in here
})
)
}
}
这避免了在组件中取消订阅并调用将在每次更改检测时评估的任何变异函数。
