Как получить доступ к вложенному свойству из наблюдаемого селектора ngrx?

Question

Определение исходных данных и интерфейс:

      export interface IInitialData {
    version: {
        patch?: string;
        Version: string,
        build: number,
    };
}

export const initialStateInitialData = {
    version: {
        build: 0,
        Version: '1',
    },
};

У меня в файле селекторов есть следующие селекторы:

      export const selectInitialDataFeature = createFeatureSelector<IInitialData>('initialData');`

export const selectInitialData = createSelector(
    selectInitialDataFeature,
    initialData => {
        return initialData;
    },
);

export const selectInitialDataVersion = createSelector(
    selectInitialData,
    initialData => {
        return initialData.version.Version;
    },
);

Доступ ко второму из файла компонента:

      public version$ = this.store.select(selectInitialDataVersion);

И из файла шаблона:

      [value]="version$ | async"

Это прекрасно работает.

Однако следующее возвращает ошибку «Версия неразрешенной переменной»

      public initialData$ = this.store.select(selectInitialData);

      [value]="initialData$.version.Version | async"`

Как мне таким образом получить доступ к переменной version.Version?

Answer 1

      <ng-container *ngIf="(initialData$ | async) as myInitialData">
  <my-component [value]="myInitialData.version.Version">
  </my-component>
</ng-container>

Вы пытаетесь получить доступ к значению вашего Observableбез подписки, что в этом случае перед использованием asyncтрубка

Или, если вы не хотите обрабатывать это в своем HTML-шаблоне, вы можете сделать это в своем файле .ts.

      ngOnInit() {
  this.store.select(selectInitialData).subscribe(
   (myData) => this.initialData = myData.version.Version; 
  );
}

      <
 ...
 ...
 [value]="intialData">

Answer 2

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

      [value]="(initialData$ | async).version.Version"