Эффективное отображение наблюдаемого RXJS

У меня есть два разных массива объектов, как переназначить массив свойств объекта.

Использование клавиши для обозначения:

export interface ProductData
{
    key:string,
    name:string
}


productData:[          
    {key:'index1',name:'invoice'},   
    {key:'index2',name:'Multi'}
];

Использование имени для значения:

export interface filterOptions{
  label:string;
  value:string;
}

Вот как я обрабатываю полученный звонок от моей службы:

this.myService.getProctResponse.subscribe(response=>{    
    this.filterOptions[0].label = response.productData[0].key;
    this.dfilterOptions[0].value = response.productData[0].name;
    this.filterOptions[1].label = response.productData[1].key;
    this.filterOptions[1].value = response.dproductData[1].name;
});

Это работает (решение 1), но я должен предоставить индекс каждого значения, чтобы сопоставить его.

Я лучше сделаю что-то вроде этого:

this.productData.map(items=>{     
    this.filterOptions.value= items.name
    this.filterOptions.label = items.key
});

Проблема: последнее значение будет выдаваться как объект, а не массив объектов.

Этот подход работает лучше, чем решение 1 (см. Выше), но есть ли лучший подход, который я мог бы использовать вместо этого?

 response.productData.forEach((item, index) => {
    let list :FilterModel = {
      label:item.key,
      value:item.name
    };

    this.filterOptions.push(list);
  });

Моя проблема здесь по-прежнему заключается в том, чтобы сопоставить свойство ключа со свойством метки и свойство имени со свойством значения.

ожидаемая цена / прибыльность:

[{label:'index1',value:'invoice'},
{label:'index2',value:'multi'},
{label:'index3',value:'single'},
{label:'index4',value:'handy'},etc];

typescript rxjs
person Mohamed Sahir    schedule 10.05.2020    source источник
comment
Пожалуйста, подумайте о редактировании приведенного выше кода, чтобы он представлял собой минимальный воспроизводимый пример со всеми соответствующими объявлениями, чтобы кто-то мог проверить, что их предложение работает (и в идеале без лишнего кода). Я не знаю, имеет ли значение то, что ваш filterOptions - это class, а не interface. В противном случае вы можете написать productDataArray.map(pd => ({ label: pd.key, value: pd.name }));, если да, то можете написать productDataArray.map(pd => (Object.assign(new FilterOptions(), { label: pd.key, value: pd.name }))). Но без полного примера трудно быть уверенным, что это именно то, что вам нужно.   -  person jcalz    schedule 10.05.2020
comment
Итак, сделайте map(), если вам '... нужно сопоставить': productData.map(({key:label,name:value}) => ({label,value}))   -  person Yevgen Gorbunkov    schedule 10.05.2020
comment
не могли бы вы добавить ожидаемый результат? Не очень понятно, чего именно вы хотите   -  person nikoss    schedule 10.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Как вы определили, необходимость привязки конкретно к значениям индекса в ответе является громоздкой и невыполнимой по ряду причин. Что, если массив ответов содержит более двух объектов? Что, если в нем меньше?

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

this.myService.getProctResponse.pipe(
  map(x => {
    let models: Array<FilterModel> = [];
    x.forEach(y => {
      let model: FilterModel = {
        label: y.key,
        value: y.name
      };

      models.push(model);
    });
    return models;
  })
).subscribe(mappedResponse => {
  //Do something with it
});

Он просто объединяет несколько идей, которые у вас уже есть, но помещает их в метод конвейера, так что он вычисляется только тогда, когда наблюдаемый проталкивает через него какие-либо данные. Как и раньше, вы просто подписываетесь на это, и вместо получения ProductData [] и последующей его обработки вы получите FilterModel [] для назначения там, где вам нужно, упрощая любые зависимые ассоциации с разметкой вашего компонента.

person Whit Waldo    schedule 10.05.2020