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); 
            }
    }
}

＆＃34; console.log（＆＃34; CLOSE＆＃34;，this.sessionId）＆＃34; line不返回存储在商店中的值。相反，我得到了这个：

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

如何在课堂上获取这些对象的数据？在视图中，如果我添加＆＃34; |异步＆＃34;价值之后，他们出现了。但我无法从实际的组件类中获取值。救命！

Answer 1

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

例如，您可以在OnInit Hook中订阅并将其分配给字段。如果字段为Observable，则为字段提供后缀$是一种很好的做法。我假设您有IQuiz数据模型的接口currentQuiz。如果变量名称与store属性相同（忽略$），则可以使用@select省略它：

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

// ...

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

更新商店后，系统会自动重新分配this.currentQuiz。

Angular 4 Redux选择问题（基本）

1 个答案: