等到函数完成并返回 Angular 6

Question

我怎样才能subscribe等到我的逻辑完成并transform返回更新的keys对象？

transform(value: any, args:string) : any {
    let keys = [];

    this.http.get('src/app/enum-data/enum.json').subscribe(data => {

      this.List = data;
      // Logic here (data vs value)
      for (var enumMember in value) {
        if (!isNaN(parseInt(enumMember, 10))) {
          keys.push({key: enumMember, value: value[enumMember]});
        } 
      }
    },
      err => {
        console.log(err);
      });

    return keys;

  }

HTML：

  <select>
          <option *ngFor="let item of gendersEnum | keys: 'gender'" [value]="item.key">{{item.value}}</option>
  </select>

这是一个pipe模块。尝试返回keys，subscribe但仍然是同样的问题。

Answer 1

不要在这里订阅你的 Observable。只需使用 RxJs 操作符映射响应并在调用transform(...).

transform(value: any, args: string): Observable<any> {
        return this.http.get('src/app/enum-data/enum.json').pipe(
            map(data => {
                let keys = [];
                // Logic here (data vs value)
                for (const enumMember in value) {
                    if (!isNaN(parseInt(enumMember, 10))) {
                        keys.push({key: enumMember, value: value[enumMember]});
                    }
                }
                return keys;
            })
        );
    }

更好的方法是使用async管道让 angular 订阅和取消订阅您的 observable ：

 <select>
          <option *ngFor="let item of gendersEnum | keys: 'gender' | async" [value]="item.key">{{item.value}}</option>
  </select>