3

我仍处于学习 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”，它们就会显示出来。但我无法从实际组件类中获取值。帮助！

4

1 回答 1

6

您必须订阅状态的选定切片，因为当您@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将自动重新分配。

于 2018-03-09T20:37:55.690 回答