код рефакторинга из нормальных коллекций в angular 4 для использования наблюдаемых rxjs

Question

У меня есть такой код в компонентах:

@Component({
  selector: 'file-upload',
})
export class FileUploadComponent  {
  files: Upload[];

  get canUpload() {
    return this.files.length > 0 && this.files.every((f) => f.state === FileUpLoadState.new && f.isValid);
  }

  get isUploading() {
    return this.files.length > 0 && this.files.some((f) => f.state === FileUpLoadState.uploading);
  }

  get activeFiles() {
    return this.files.filter((f) => f.state !== FileUpLoadState.success);
  }

Я хочу изменить files член на BehaviouSubject

  files: BehaviorSubject<FileToUpload[]> = new BehaviorSubject([]);

Но я не знаю, горячийЧтобы изменить геттеры canUpload, isUploading и т. д. для использования наблюдаемой, в rxjs 5.1.0 нет оператора pipe, и обновление по разным причинам невозможно,

Нужно липодписаться в геттере или есть лучший способ?

Answer 1

Вы правы, что нет оператора pipe, но до rxjs V6 он использовал методы расширения, поэтому .map() и .filter() должны все же добиться цели.У меня не было возможности работать с Angular V4, но это должно сработать:

@Component({
  selector: 'file-upload',
})
export class FileUploadComponent  {
  files$ = new BehaviorSubject([]);

  get canUpload$() {
    return this.files$.map(files => files.length > 0 && this.files.every((f) => f.state === FileUpLoadState.new && f.isValid));
  }

  get isUploading$() {
    return this.files$.map(files => files.length > 0 && this.files.some((f) => f.state === FileUpLoadState.uploading));
  }

  get activeFiles$() {
    return this.files$.filter(files => files.filter((f) => f.state !== FileUpLoadState.success));
  }
}

Имейте в виду, что геттеры также становятся наблюдаемыми.Если вы не хотите, чтобы получатели были наблюдаемыми, вы, вероятно, можете подписаться на них в получателе:

get activeFiles() {
  let files;

  this.files$
      .filter(files => files.filter((f) => f.state !== FileUpLoadState.success))
      .subscribe(s => files = s);

  return files;
}

Но я бы лично придерживался первого подхода и подписывался на наблюдаемые на самой поздней стадии, насколько это возможно.