Angular 4 Redux 选择问题（基本）

Question

我仍处于学习 Angular 4 和 Redux 的早期阶段。我有一个从商店获取信息的组件。它在视图中工作正常。但是当我尝试从组件内部访问相同的信息时，我得到的是一个对象而不是值。

这是我的组件：

import { Component } from '@angular/core';
import { NgRedux, select } from 'ng2-redux'; 
import { AppState } from '../../reducers/reducer';
import { QuizService } from '../../services/quiz.service';  
import { clearQuiz } from '../../actions/actions'; 

@Component({ 
    selector: 'quiz', 
    templateUrl: './quiz.component.html', 
    styleUrls: ['./quiz.component.css']
})

export class Quiz {
    constructor(private ngRedux: NgRedux<AppState>, private service: QuizService) {}

    @select('currentQuiz') currentQuiz;
    @select('quizLength') quizLength; 
    @select('sessionId') sessionId; 

    handleClose() {
        console.log("CLOSE", this.sessionId )
        this.service.deleteSession(this.sessionId)
            .subscribe(res => {
                this.ngRedux.dispatch(clearQuiz())
            })
            , error => {
                console.error(error); 
            }
    }
}

“console.log("CLOSE", this.sessionId )”行不返回存储在存储中的值。相反，我得到了这个：

CLOSE AnonymousSubject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}

如何从类中的这些对象中获取数据？在视图中，如果我在值后添加“| async”，它们就会显示出来。但是我无法从实际组件类中获取值。帮助！

Answer 1

您必须订阅状态的选定切片，因为当您@select从商店中时，您不会获得值，而是Observable. 这就是您必须async在模板中使用管道的原因。它会自动为您进行订阅。

例如，您可以在OnInitHook 中订阅并将其分配给一个字段。$如果字段是 Observable ，则给字段添加后缀是一种很好的做法。我假设您有一个IQuiz用于currentQuiz. 如果变量名与 store 属性相同（忽略 $），你可以用 省略它@select：

@select() currentQuiz$: Observable<IQuiz>;
currentQuiz: IQuiz;

// ...

ngOnInit() {
  this.currentQuiz$.subscribe(currentQuiz => this.currentQuiz = currentQuiz)
}

当您的商店更新时，this.currentQuiz将自动重新分配。