angular - 异步管道无法呈现 Observable

Question

e(1):更新代码以解决原始问题中的拼写错误。
e(2):尝试将数据“JSON.stringify()”推送到“createContent()”中的我的 JSON 对象中。运气不好。
e(3):根据要求添加了plnkr:http://plnkr.co/edit/j024MYCQbypAGaf762fT

我有一个模型...

class Content {
  constructor(public name: string) { }
}

我有一个服务...

class ContentService {
  private _contents$: Subject<Content[]>
    = new Subject<Content[]>();

  get contents$(): Observable<Content[]> {
    return this._contents$.asObservable();
  }

  private _data: { contents: Content[] } = { contents: [] };

...

  load(): void {
    createContent(new Content("Test Content..."));
  }

  createContent(item: Content): void {
    this._data.contents.push(item);
    this._contents$.next(this._data.contents);
  }
}

我有一个组件...

@Component({
...
template: `
<h1 *ngFor="let item of contents$ | async">{{ item.name }}</h1>
`
})
class ContentListComponent {
  contents$: Observable<Content[]>;

  constructor(private _contentService: ContentService) { }

  ngOnInit(): void {
    this.contents$ = this._contentService.contents$;
    this._contentService.load();
  }
}

简而言之，我不明白为什么我的组件中的 Observable 无法正常运行。

如果我改变这些，这样我在组件中有一个数组，订阅服务“contents$”来填充数组，那么这没什么大不了的。

当我记录调用的服务和函数的输出时，一切都很好。我遇到的唯一症状是“*ngFor”似乎没有正确处理流。这很明显，不是吗？

Answer 1

问题是 Angular 评估了

<h1 *ngFor="let item of contents$ | async">{{ item.name }}</h1>

仅当更改检测下次运行时。

因为

this._service.load();

同步执行，事件在 Angular 有机会订阅之前发出。

例如，如果您使用 BehaviorSubject 而不是 Subject 将最后发出的值发送给新订阅者，那么您将获得所需的行为。

Plunker example

您还可以在调用 this._service.load(); 或延迟调用 this._service.load(); 之前手动调用更改检测
但这取决于您的具体要求。