[英]*ngFor simply not working with array of Objects
I have the TS code我有 TS 代码
getItems().subscribe(val=>{
this.items=val;
})
which works fine.效果很好。 When I console.log(this.items) I get
当我 console.log(this.items) 我得到
"array:0{size:XL,quantity:1}"
Buuut.布特。 Amazingly, something I've never dealt with before in angular, when I run the code in the html template of
令人惊讶的是,当我在 html 模板中运行代码时,我在 angular 中从未处理过的事情
<div *ngFor="let item of items">
{{item.size}}
</div
items =[{size:'XL',quantity:4}] I get ABSOLUTELY NOTHING. items =[{size:'XL',quantity:4}] 我一无所有。 This is really bizzarre because I've written hundreds of these statements and have never had this issue before.
这真的很奇怪,因为我已经写了数百个这样的声明并且以前从未遇到过这个问题。 Please help me.
请帮我。
Solved:解决了:
What I've figured out is that calling getItems() with a subject, where the getItems method returns a subject "asobservable" can ONLY be done in the same component, directly after the subject is populated.我发现用一个主题调用 getItems(),其中 getItems 方法返回一个主题“asobservable”只能在同一个组件中完成,直接在填充主题之后。 Populating a subject prior to page change seems to still allow the data to be transferred enough to log in console, but not to be usable by the greater application.
在页面更改之前填充主题似乎仍然允许传输足够的数据以登录控制台,但不能被更大的应用程序使用。
So therefore doing所以因此做
updateItems(items);
getItemsUpdated().subscribe(val=>{
this.items=val
})
where there is a subject and有一个主题和
updateItems(items:items){
this.subject.next(items)
}
getItemsUpdated(){
return this.subject.asObservable()
}
would Work, but only when called directly next to each other in the same component.会起作用,但只有在同一个组件中直接相邻调用时。
Since in this case I was updating the subject, switching pages, and then calling the subject, I was experiencing a weird sort of subject limbo where the console was still able to record the value passed to the subject, but it was not being resolved fully by the receiving component, and therefore was not functioning with the *ngFor.因为在这种情况下,我正在更新主题、切换页面,然后调用主题,所以我遇到了一种奇怪的主题边缘,控制台仍然能够记录传递给主题的值,但没有完全解决由接收组件,因此无法与 *ngFor 一起使用。
Correct Flow正确的流程
updateItems(items);
---------->Navigate to next page-------->
getItemsUpdated().subscribe(val=>{
this.items=val
})
where there is a behavior Subject and哪里有行为主体和
updateItems(items:items){
this.behaviorSubject.next(items)
}
getItemsUpdated(){
return this.behaviorSubject.asObservable()
}
For this case, using a BehaviorSubject instead of Subject allowed the data to be process "on time" correctly and work with the app.在这种情况下,使用 BehaviorSubject 而不是 Subject 可以“按时”正确处理数据并与应用程序一起使用。 Thanks everybody for your input!
谢谢大家的意见!
Your stackblitz doesnt allow ngFor so the setup must be wrong.您的 stackblitz 不允许 ngFor 所以设置一定是错误的。 Here is what I think is the problem:
这是我认为的问题:
Your app has a weird data flow, when you subscribe to your observable, you wont receive any data until something calls next on your subject.你的应用程序有一个奇怪的数据流,当你订阅你的 observable 时,你不会收到任何数据,直到你的主题下一个调用。 What you seems to be doing from what I've seen in your stackblitz is:
从我在您的 stackblitz 中看到的内容来看,您似乎在做的是:
You can't get the last value from a subject and since you subsribed too late, your console.log from the subscribe is never actually doing anything.您无法从主题中获取最后一个值,并且由于您订阅得太晚,因此订阅中的 console.log 永远不会真正做任何事情。 You are seeing the console.log related to your update(the one from hello component)
您正在看到与您的更新相关的 console.log(来自 hello 组件的那个)
You should be using a BehaviorSubject
or a ReplaySubject
;您应该使用
BehaviorSubject
或ReplaySubject
; plain Subject
will only give you the values emitted after the subscription.普通
Subject
只会给你订阅后发出的值。
export class CartService {
public cartUpdated: Subject<Item[]> = new BehaviorSubject([]);
More info in: Subject vs BehaviorSubject vs ReplaySubject in Angular更多信息: Angular 中的 Subject vs BehaviorSubject vs ReplaySubject
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.