Initial Data definition and Interface:
export interface IInitialData {
version: {
patch?: string;
Version: string,
build: number,
};
}
export const initialStateInitialData = {
version: {
build: 0,
Version: '1',
},
};
I have the following selectors in the selectors file:
export const selectInitialDataFeature = createFeatureSelector<IInitialData>('initialData');`
export const selectInitialData = createSelector(
selectInitialDataFeature,
initialData => {
return initialData;
},
);
export const selectInitialDataVersion = createSelector(
selectInitialData,
initialData => {
return initialData.version.Version;
},
);
Accessing 2nd one from component file:
public version$ = this.store.select(selectInitialDataVersion);
And from template file:
[value]="version$ | async"
This works fine.
However, following returns error "Unresolved variable version"
public initialData$ = this.store.select(selectInitialData);
[value]="initialData$.version.Version | async"`
How do I access the variable version.Version in this manner?
<ng-container *ngIf="(initialData$ | async) as myInitialData">
<my-component [value]="myInitialData.version.Version">
</my-component>
</ng-container>
You are trying to access the value of your Observable without subscribing it, which in this case, before using the async pipe
Or if you don't want to handle that in your template html, you could do it in your .ts file
ngOnInit() {
this.store.select(selectInitialData).subscribe(
(myData) => this.initialData = myData.version.Version;
);
}
<
...
...
[value]="intialData">
You need to use the async pipe directly after the observable, then then access the properties:
[value]="(initialData$ | async).version.Version"