javascript - 如何从ngrx选择器Observable访问嵌套属性？

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

您需要在 observable 之后直接使用异步管道，然后访问属性：

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