Как добавить свойство к модели данных в angular, которое используется только для отображения на странице списка пользовательского интерфейса

#an&ular #rxjs

#an&ular #rxjs

Вопрос:

 export class IdentityProvider {
  public id: strin&;
  public name: strin&;
  public description: strin&;
  public provider: strin&;
  public tenantId: strin&;
  public clientId: strin&;
  public clientSecret: strin&;

  constructor(data?: any) {
    this.id = '';
    this.name = '';
    this.description = '';
    this.provider = '';
    this.tenantId = '';
    this.clientId = '';
    this.clientSecret = '';

    if (!data) {
      // empty constructor
      return;
    }

    this.id = data.id;
    this.name = data.name;
    this.description = data.description;
    this.provider = data.provider;
    this.tenantId = data.tenantId;
    this.clientId = data.clientId;
    this.clientSecret = data.clientSecret;
  }
  

}

Выше приведена моя модель, поставщик — это идентификатор. GetAll api возвращает IdentityProvider[], а api не возвращает имя поставщика.

Имя поставщика должно отображаться на странице списка (я могу получить список поставщиков в начале страницы списка, который представляет собой небольшой объем данных до 10 строк). Что было бы лучшим решением для этого с использованием RxJS

текущее решение :

я написал в модели метод toData(idpl IdentityProvider[], providers: Provider[]), который сравнивает каждый идентификатор поставщика с массивом provider и добавляет новое имя свойства. наконец, возвращает список

Комментарии:

1. Вы уже пробовали что-нибудь делать?

2. @Nicolas добавил в вопрос ниже

3. Пожалуйста, добавьте другой код, который имеет отношение к этой ситуации, поскольку ваш вопрос в настоящее время очень неясен…

Ответ №1:

Поскольку вы отметили вопрос с помощью RxJS, вот метод RxJS, который я использовал для сопоставления набора продуктов с идентификатором категории с набором категорий, чтобы получить название категории для отображения в пользовательском интерфейсе.

   productsWithCate&ory$ = combineLatest([
    this.products$,
    this.productCate&oryService.productCate&ories$
  ]).pipe(
    map(([products, cate&ories]) =&&t;
      products.map(product =&&t; ({
        ...product,
        cate&ory: cate&ories.find(c =&&t; product.cate&oryId === c.id).name
      }) as Product)
    )
  );
  

Я бы предположил, что вы могли бы использовать что-то подобное для сопоставления ваших IdentifyProviders и Providers.

У меня есть видео с более подробной информацией здесь: https://www.youtube.com/watch?v=Z76QlSpYcck