将可观察响应映射为 Angular 中的自定义接口数组

Posted

技术标签:

【中文标题】将可观察响应映射为 Angular 中的自定义接口数组【英文标题】:Mapping an observable response as an array of custom interfaces in Angular 【发布时间】:2021-12-03 22:42:53 【问题描述】:

我有一个Observable keyValue(): Observable<[id: number]: string;>;

Observable 的参数是:


    [id: number]: string;

如你所见,第二个参数没有名字

现在我之前的 Observable 的一个结果是:

1: 'Bad', 2: 'Good', 3: 'Worst', 4: 'Best', 5: 'Mean'

我需要翻译成一个数组:

interface NumberKeyValue 
   id: number;
   value: string;
 

我正在尝试:

.keyValue()
  .pipe(
    map((kv) => 
      console.log(kv);
      const jsonObject = JSON.parse(JSON.stringify(kv));
      console.log(jsonObject);
      const nkvArray: NumberKeyValue[] = [];
      for (const item of jsonObject) 
        console.log(item);
        const nkv: NumberKeyValue = 
          id: 8,                                        //How to catch the id number?
          value: 'empty',                               //How to catch the string?
        ;
        nkvArray.push(nkv);
      
      return nkvArray;
    )
  )
  .subscribe((response) => 
    console.log(response);
  );

在之前的代码之后我得到了:

TypeError: jsonObject is not iterable
    at MapSubscriber.project (template-sms.facade.ts:295)
    at MapSubscriber._next (map.js:29)
    at MapSubscriber.next (Subscriber.js:49)
    at TapSubscriber._next (tap.js:46)
    at TapSubscriber.next (Subscriber.js:49)
    at SwitchMapSubscriber.notifyNext (switchMap.js:70)
    at InnerSubscriber._next (InnerSubscriber.js:11)
    at InnerSubscriber.next (Subscriber.js:49)
    at MapSubscriber._next (map.js:35)
    at MapSubscriber.next (Subscriber.js:49)

第一个也是主要的问题:如何将我的NumberKeyValue 接口转换为一个数组?

其次:这种类型表示有名称[id: number]: string;吗?

【问题讨论】:

【参考方案1】:

对象类型确实不可迭代,但您可以使用Object.keys 获取一个键数组,然后您可以使用这些键以所需的形式投影数据:

.keyValue()
  .pipe(
    map((kv) => 
      // use object destructuring to get a new reference instead of
      // JSON.parse(JSON.stringify(something))
      const jsonObject =  ...kv ;
      return Object.keys(jsonObject).map(key => ( id: key, value: jsonObject[key] );
    ),
  ).subscribe((response) => 
    console.log(response);
  );

【讨论】:

【参考方案2】:

根据Octavian的回答,如你所见,需要一个演员表,使用+key而不是key;和一个NumberKeyValue 接口数组。

  .keyValue()
  .pipe(
    map((kv) => 
      const jsonObject =  ...kv ;

      return Object
        .keys(jsonObject)
        .map((key) => 
          const nkv: NumberKeyValue =  id: +key, value: jsonObject[+key] ;

          return nkv;
        );
    ),
  )
  .subscribe((response) => 
    console.log(response);
  );
  
  

以前,我是用古老的形式思考的。

  .keyValue()
  .pipe(
    map((kv) => 
      const numberKVArray: NumberKeyValue[] = [];
      let response = JSON.stringify(kv);
      response = response.replace(/[]/g, '');
      const pairs = response.split('",');
      for (const pair of pairs) 
        const property = pair.split(':"');
        property[0] = property[0].replace(/(^"|"$)/g, '');
        property[1] = property[1].replace(/(^"|"$)/g, '');
        const nkv: NumberKeyValue = 
          id: +property[0],
          value: property[1],
        ;
        numberKVArray.push(nkv);
      

      return numberKVArray;
    ),
    takeUntil(this.destroy$),
  )
  .subscribe((response) => 
    console.log(response);
  );

但是,第一个答案是最好的。

【讨论】:

以上是关于将可观察响应映射为 Angular 中的自定义接口数组的主要内容,如果未能解决你的问题,请参考以下文章

Storybook Angular:如何使用导入的自定义库中的模型/接口?

如何将可观察值传递给@Input() Angular 4

如何将可映射对象保存到 nsuserdefault?

RxSwift:将可完成映射到单个可观察?

如何将可观察集合绑定到 xamarin 中的 flexlayout?

将预定义的验证器添加到 Angular 中的自定义组件