Использование @input Observable в представлении, но функция канала в компоненте игнорируется

Question

В моем компоненте я использую @Input, тип Observable.В представлении я использую канал | async для обработки подписки и отписки от потока Observable.В компоненте я пытаюсь pipe это Observable выполнить некоторую мутацию в потоке.Однако функция карты внутри канала никогда не запускается.

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

В настоящий момент функция карты внутри канала никогда не запускается и, следовательно, не изменяет данныепо желанию.Желаемым результатом будет то, что мутация данных происходит внутри функции карты.

Answer 1

Вы должны подписаться на Observable, чтобы получать уведомления

Answer 2

Вам необходимо подписаться на 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
   }
 }