Question

在我的组件中，我使用的是@Input类型的Observable。在视图中，我使用| async管道来处理Observable流的订阅和取消订阅。在组件中，我正在尝试pipe这个Observable对流执行一些更改。但是，管道内的map函数永远不会触发。

data.component.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函数内部。

Answer 1

您需要在组件内部订阅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打算避免在subscribe中使用component，所以有一个想法：注意：您也可以编写一个自定义管道来执行此操作，但是现在，请考虑以下问题：

@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
   }
 }

Answer 2

为避免订阅和取消订阅热观测，可以使用以下方法：

@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
        })
      )
  }
}

这避免了取消订阅组件并调用将在每次更改检测时评估的任何mutating function。

Answer 3

您应该订阅Observable，以得到通知

在视图中使用@input Observable，但忽略组件中的管道功能

3 个答案: