ошибка машинописи при назначении события подписки

Question

Вот мой код ts: после this.store.pipe я присваиваю данные courseList - но получаю ошибку машинописного текста как:

ОШИБКА в src / app / setup-config/setup-config/setup-config.component.ts(55,4): ошибка TS2740: типу 'ModelCourse []' не хватает следующих свойств из типа 'Observable': _isScalar, source, operator, lift и еще 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.