Опираясь на несколько наблюдаемых в шаблоне в приложении Angular

Question

Мы используем избыточность практически для всего в нашем приложении. Обычно, когда мы используем данные, извлеченные из состояния приложения, мы сохраняем их как наблюдаемые и используем Observable в шаблоне компонента.

например:

*ngFor="let project of projects$ | async"

Как правильно сделать это, если у нас есть компонент с двумя (или более) наблюдаемыми? Особенно, когда мы используем данные из обоих: Итерации по одному списку и при рендеринге, извлечение некоторых деталей из другого?

Мне известно, что я могу подписаться на изменения в компоненте для всех наборов данных, сохранить их в отдельной переменной в контроллере и использовать их в шаблоне. Но мне было интересно, есть ли более изящный способ, который не требует разворачивания наблюдаемых.

Вот более конкретный пример: У меня есть контроллер:

export class PrincipleComponent implements OnInit {

  @select(['principleList', 'principles'])
  principles$: Observable<Principle[]>;

  @select(['domainPrincipleList', 'domainPrinciples'])
  domainPrinciples$: Observable<DomainPrinciple[]>;

  columnsToDisplay = ['id', 'title', 'description'];

  constructor(private principleActions: PrincipleActions,
              private domainPrincipleActions: DomainPrincipleActions,
              private domainActions: DomainActions) { }

  ngOnInit() {
    this.principleActions.loadPrinciples();
    this.domainPrincipleActions.loadDomainPrinciples();
    this.domainActions.loadDomains();
  }

}

И в шаблоне я пытаюсь пройтись по принципам и внутри каждой итерации использовать информацию, доступную в domainPrinciples:

<mat-card *ngFor="let principle of principles$ | async" class="principle-card">
      {{principle.name}}
      // Here I need to use some data coming from the domainPrinciples$ Observable
  </mat-card>

UPDATE

Видимо, я понятия не имею, как добиться того, что мне нужно: Итак, в моем контроллере у меня есть:

selectedDomainId: number = null;

  @select(['principleList', 'principles'])
  principles$: Observable<Principle[]>;

  @select(['domainList', 'domains'])
  domains$: Observable<Domain[]>;

  @select(['domainPrincipleList', 'domainPrinciples'])
  domainPrinciples$: Observable<DomainPrinciple[]>;

Тогда в шаблоне, который я начал строить:

<div fxLayout="column"
     fxLayoutAlign="space-between stretch"
     fxLayoutGap="5px"
     class="fp-principles-list"
     *ngIf="{ domains: domains$ | async, principles: principles$ | async, domainPrinciples: domainPrinciples$ | async } as values;">

  <h1 class="mat-headline title">40 Principles Settings</h1>
  <h2 class="mat-subheader title">
    Principles for
    <small>
      <mat-form-field [floatLabel]="'never'" class="domain-selector">
        <mat-select placeholder="Generic definitions" [(ngModel)]="selectedDomainId" name="domain">
          <mat-option>
            Generic definitions
          </mat-option>
          <mat-option *ngFor="let domain of values.domains" [value]="domain.id">
            {{domain.title}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </small>
  </h2>

  <table mat-table [dataSource]="values.principles" class="mat-elevation-z4">

    <!-- Id Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element" class="td-id"> {{element.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef> Title </th>
      <td mat-cell *matCellDef="let element" class="td-title"> {{element.title}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef>
        Description
      </th>
      <td colspan="2" mat-cell *matCellDef="let element" class="td-description" [innerHTML]="element.description"></td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
  </table>
</div>

DomainPrinciple объект:

export class DomainPrinciple {
  id?: number;
  description?: string;
  domain?: IdRef;
  principle?: IdRef;
  createdBy: IdRef;
  dateCreated: Moment;
  updatedBy?: IdRef;
  lastUpdated?: Moment;
}

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

Единственный вариант, который я вижу, - это создать функцию и передать principle, выбранный домен и весь список принципов домена в качестве аргументов и разрешить описание на основе этого.

Но это неправильно ... Я чувствую, что это должно быть сделано с помощью приведения, но я не знаю, как.