*ngFor 根本不处理对象数组

Question

我有TS码

getItems().subscribe(val=>{
this.items=val;
})

效果很好。当我 console.log(this.items) 我得到

"array:0{size:XL,quantity:1}"

不过。令人惊讶的是，我以前从未在 angular 中处理过的事情，当我运行

的 html 模板中的代码时

<div *ngFor="let item of items">
{{item.size}}
</div

件数=[{尺寸:'XL',数量:4}] 我一无所获。这真的很奇怪，因为我已经写了数百个这样的陈述并且以前从未遇到过这个问题。请帮助我。

已解决：

我发现调用带有主题的 getItems()，其中 getItems 方法 returns 主题“asobservable”只能在填充主题后直接在同一组件中完成.在页面更改之前填充主题似乎仍然允许传输足以登录控制台的数据，但不能被更大的应用程序使用。

所以如此做

updateItems(items);
getItemsUpdated().subscribe(val=>{
this.items=val
})

哪里有主题和

updateItems(items:items){
this.subject.next(items)
}
getItemsUpdated(){
return this.subject.asObservable()
}

会工作，但仅当在同一组件中彼此相邻调用时才有效。
因为在这种情况下我更新主题，切换页面，然后调用主题，我遇到了一种奇怪的主题边缘，控制台仍然能够记录传递给主题的值，但它没有被完全解决由接收组件，因此不能与 *ngFor 一起运行。

正确的流程

updateItems(items);
---------->Navigate to next page-------->
getItemsUpdated().subscribe(val=>{
this.items=val
})

有行为主题和

updateItems(items:items){
this.behaviorSubject.next(items)
}

getItemsUpdated(){
return this.behaviorSubject.asObservable()
}

对于这种情况，使用 BehaviorSubject 而不是 Subject 允许数据“按时”正确处理并与应用程序一起使用。感谢大家的参与！

Answer 1

你的 stackblitz 不允许 ngFor 所以设置一定是错误的。这是我认为的问题所在：

你的应用程序有一个奇怪的数据流，当你订阅你的可观察对象时，你不会收到任何数据，直到你的主题的下一个调用。从我在你的 stackblitz 中看到的你似乎在做的是：

您无法从主题中获取最后一个值，并且由于您订阅的时间太晚，您从订阅中获得的 console.log 实际上从来没有做任何事情。您正在看到与您的更新相关的 console.log（来自 hello 组件的那个）

Answer 2

您应该使用 BehaviorSubject 或 ReplaySubject；纯 Subject 只会给你在订阅后发出的值。

export class CartService {
  public cartUpdated: Subject<Item[]> = new BehaviorSubject([]);

更多信息见：

*ngFor simply not working with array of Objects