无法使用 Angular 8 NativeScript 应用设置或获取 NGXS 状态

Question

使用 Angular 工作了一段时间，所以在学习 NativeScript 教程时，我决定第一次尝试 NGXS 数据存储。我已经尝试了 ~5 种不同的 NGXS 书面教程（从 NS 文档开始）但是无法更新状态，尽管 Android Studio 或 NS 没有抛出任何错误。

NGXS 3.5 | Angular 8.0 | NativeScript 5.4

尝试的最终状态=>https://github.com/argarner/ns-ng-course/commits/ngxs-failed-integration

// app.module.ts

import { NgxsModule } from '@ngxs/store';
import { ChallengeState } from './shared/challenge.state';

...
imports: [
    ...
    NgxsModule.forRoot([ChallengeState])
],

// ./shared/challenge.state.ts

import { State, Action, StateContext, Selector } from '@ngxs/store';

export class SetChallengeAction {
    static readonly type = '[Challenge Edit Component] Set Challenge';
    constructor(public payload: string) {}
}

export interface ChallengeStateModel {
    currentChallenge: string;
}

@State<ChallengeStateModel>({
    name: 'challenge',
    defaults: {
        currentChallenge: 'kjsdjfkljslkfsd'
    }
})
export class ChallengeState {
    @Selector()
    static getChallenge(state: ChallengeStateModel) {
        return state.currentChallenge;
    }

    @Action(SetChallengeAction)
    setChallenge(
        { patchState }: StateContext<ChallengeStateModel>,
        { payload }: SetChallengeAction
    ) {
        patchState({ currentChallenge: payload });
    }
}

//当前-challenge.component.ts

import { Select, Store } from '@ngxs/store';
import { ChallengeState } from '~/app/shared/challenge.state';

export class CurrentChallengeComponent {
    currentChallenge: Observable<string>;
    constructor(private store: Store) {
        this.currentChallenge = this.store.select(
            state => state.challenge.currentChallenge
        );
    }
}

//当前-challenge.component.html

<Label class="title" [text]="currentChallenge | json"></Label>

如果我不使用 json 管道，标签文本显示为 [object object]

使用 json 管道，标签文本为 { "_isScalar": false }

无论我如何获取、设置或访问 NGXS 状态，这都不会改变。

我错过了什么？与 NGXS 和 NS 是否存在根本的不兼容性？

Answer 1

Store.prorotype.select returns 和 Observable，因此您必须先使用 async 管道进行管道传输：

<Label class="title" [text]="currentChallenge | async"></Label>

此外，您不需要使用回调来映射状态，您已经创建了一个备忘的选择器，您所要做的就是：

currentChallenge = this.store.select(ChallengeState.getChallenge);

无法使用 Angular 8 NativeScript 应用设置或获取 NGXS 状态

Can't set or get NGXS state with Angular 8 NativeScript app

nativescript

angular

ngxs