订阅事件分配时出现打字稿错误

Question

这是我的ts代码：在this.store.pipe之后，我将数据分配给courseList-但出现打字错误：

  

输入错误   src / app / setup-config / setup-config / setup-config.component.ts（55,4）：   错误TS2740：类型“ ModelCourse []”缺少以下属性   来自“可观察”类型：_isScalar，源，运算符，   电梯，还有5个。

那是什么意思？我需要在这里进行什么更正？

import { Component, OnInit } from '@angular/core';

import { Store, select } from '@ngrx/store';
import { StateSetupConfig, ModelCourse } from "./../models";
import { LoadCourse } from "./../state/course.actions";
import * as setupConfigActions from "./../state/setup-config.actions";
import * as actions from "./../state";

import { Observable } from 'rxjs';
declare var $:JQueryStatic;

@Component({
    selector: 'setup-config',
    templateUrl: './setup-config.component.html',
    styleUrls: ['./setup-config.component.scss']
})
export class SetupConfigComponent implements OnInit {


    courseList:Observable<ModelCourse[]>


    constructor(private store:Store<StateSetupConfig>) { }

    ngOnInit(){ 


        this.store.dispatch(new LoadCourse());

        this.store.pipe(select(actions.getCourses)).subscribe((data:ModelCourse[]) => {
            this.courseList = data;
        })

    }


}

Answer 1

问题是您正在尝试将类型ModelCourse[]的实际值分配给类型Observable<ModelCourse[]的类成员。

最干净的方法是直接分配商店选择器，例如：

public readonly courseList$ = this.store.pipe(
  select(actions.getCourses),
);

在模板内部，使用async管道检索值，如：

<div *ngFor="let course of courseList$ | async">
  <!-- example -->
</div>

通过这种方式，您不必取消订阅就可以销毁组件。

网站说明： 如果您在多个位置使用数据，并且始终想要最新值，则可以在流shareReplay之后添加select运算符。