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运算符，升级也不是出于各种原因的选择。

我需要在getter中订阅还是有更好的方法？

Answer 1

您是正确的，没有管道运算符，但是在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;
}

但是我个人会坚持采用第一种方法，并在最晚的阶段订阅可观察的东西。

从angular 4中的正常集合重构代码以使用rxjs observables

1 个答案: