Angular Observable Data Services无法直接刷新数据

Question

在我的项目中，我按照此tutorial实施了Angular Observable Data Services。实际上，我面临着两个对象之一的刷新问题：Theme对象在没有问题的情况下直接刷新了Theme component，而与我的{{1 }}，仅在topbar component上刷新，而不在Category中直接刷新。我需要返回主页刷新我的Category component。

在我的模型实现下面：

topbar component

我的topbar component：

export class Theme {
  _id: string;
  name: string;
  description: string;
  iconCode: string;
  categories: Category[];
  createdAt: Date;
  updatedAt: Date;

export class Category {
  _id: string;
  name: string;
  description: string;
  createdAt: Date;
  updatedAt: Date;

我的CategoryStoreService：

export class CategoryStoreService {

  private _categories: BehaviorSubject<Category[]> = new BehaviorSubject<Category[]>([]);
  private dataStore: {
    categories: Category[]
  };

  constructor(private categoryBackendService: CategoryBackendService) {
    this.dataStore = { categories: [] };
    this._categories = new BehaviorSubject<Category[]>([]);
  }

  get categories() {
    return this._categories.asObservable();
  }

  addThemeCategory(themeId: string, category: Category) {
    this.categoryBackendService.addThemeCategory(themeId, category).subscribe(
      res => {
        this.dataStore.categories.push(res);
        this._categories.next(Object.assign({}, this.dataStore).categories);
      },
      err => console.log('Error creating the category')
    );
  }

我通过以下代码在ThemeStoreService中订阅了export class ThemeStoreService { private _themes: BehaviorSubject<Theme[]> = new BehaviorSubject<Theme[]>([]); private dataStore: { themes: Theme[] }; constructor(private themeBackendService: ThemeBackendService) { this.dataStore = { themes: [] }; this._themes = new BehaviorSubject<Theme[]>([]); } get themes() { return this._themes.asObservable(); } /** * Get the themes and their categories from the server and load it to the * data store */ getThemes() { this.themeBackendService.getThemes().subscribe( res => { this.dataStore.themes = res; this._themes.next(Object.assign({}, this.dataStore).themes); }, err => console.log("Error retrieving the themes") ); } ：

ThemeStoreService

及其模板：

app.component.ts

并且由于我订阅了export class AppComponent implements OnInit { themes$: Observable<Theme[]>; constructor(private themeStoreService: ThemeStoreService) { } ngOnInit() { // Subscribe to the themes this.themes$ = this.themeStoreService.themes; // Load all the themes this.themeStoreService.getThemes(); } ，该主题通过主题数据模型中的字段<app-topbar [themes]="themes$ | async"></app-topbar> <router-outlet></router-outlet> 链接到我的Theme，因此视图不应该在我的视图中自动更新顶部栏？

顶部栏是一个愚蠢的组件，它通过@Input（）属性接收Category并显示带有以下代码的主题和类别：

categories

.ts文件

themes

我该如何解决这个问题？

预先感谢您的帮助。

Answer 1

您的问题是您的子组件正在声明：

@Input() themes: Theme[];

您的父组件正在传递异步可观察流：

<app-topbar [themes]="themes$ | async"></app-topbar>

其中themes$的位置键入为Observable。

我上次检查

[themes]="themes$ | async"在自定义输入指令中不起作用。您需要使用Observable从Subscription themes $ 中手动提取数据，然后传递数据：

import { ..., OnInit, OnDestroy } from ... //psuedo-code, add OnDestroy
import { ..., Subscription } from 'rxjs'; // psuedo-code, add Subscription

export class AppComponent implements OnInit, OnDestroy {

  themes: Theme[];
  themesSub: Subscription;

  constructor(private themeStoreService: ThemeStoreService) { }

  ngOnInit() {
    // Subscribe to the themes
    this.themesSub = this.themeStoreService.themes.subscribe({ data => this.themes = data });
    // Load all the themes
    this.themeStoreService.getThemes();
  }

  ngOnDestroy() {
    this.themesSub.unsubscribe();
  }

不要忘记更改html：<app-topbar [themes]="themes"></app-topbar>