1

我有 TS 代码

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

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

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

布特。令人惊讶的是，当我在 html 模板中运行代码时，我以前从未在 Angular 中处理过

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

items =[{size:'XL',quantity:4}] 我一无所有。这真的很奇怪，因为我已经写了数百个这样的声明并且以前从未遇到过这个问题。请帮我。

解决了：

我发现用一个主题调用 getItems()，其中 getItems 方法返回一个主题“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 可以“按时”正确处理数据并与应用程序一起使用。谢谢大家的意见！

4

2 回答 2

0

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

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

  1. 调用更新将为您的主题赋予价值
  2. 你订阅了，已经太晚了

您无法从主题中获取最后一个值，并且由于您订阅得太晚，因此订阅中的 console.log 永远不会真正做任何事情。您正在看到与您的更新相关的 console.log（来自 hello 组件的那个）

于 2021-05-26T19:54:54.123 回答
0

您应该使用 aBehaviorSubject或 a ReplaySubject; plainSubject只会给你订阅后发出的值。

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

更多信息：Subject vs BehaviorSubject vs ReplaySubject in Angular

修复了 Stackblitz

于 2021-05-26T20:17:56.350 回答