javascript - *ngFor 根本不使用对象数组
问题描述
我有 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 可以“按时”正确处理数据并与应用程序一起使用。谢谢大家的意见!
解决方案
您的 stackblitz 不允许 ngFor 所以设置一定是错误的。这是我认为的问题:
你的应用程序有一个奇怪的数据流,当你订阅你的 observable 时,你不会收到任何数据,直到你的主题下一个调用。从我在您的 stackblitz 中看到的内容来看,您似乎在做的是:
- 调用更新将为您的主题赋予价值
- 你订阅了,已经太晚了
您无法从主题中获取最后一个值,并且由于您订阅得太晚,因此订阅中的 console.log 永远不会真正做任何事情。您正在看到与您的更新相关的 console.log(来自 hello 组件的那个)
推荐阅读
- javascript - iOS Safari 浏览器上的 ICS 文件
- robotframework - Robot Framework 中“Should Be True ${hex_value}==${0xFF}”表达式背后的步骤是什么?
- javascript - (JS) 带有背景视频的类似 SPA 的网站行为
- python - Flask 中使用的路由装饰器是如何工作的
- javascript - 在循环内触发同步调用 等待两个 api 调用成功然后下一次迭代需要以角度 6 开始
- timezone - 为什么 SQL Server 2017 无法识别 AT 时区?
- javascript - 如何按 id 和 likes 对评论和子评论对象的数组进行排序?
- performance - 尽管迭代之间存在依赖关系,但循环花费不到 1 个周期
- java - 如何在 Spring reactive 的 ServerHttpResponse 中设置非标准的 HttpStatus?
- ios - SwiftUI - 导航链接。如何根据后端响应进行路由?