英文:
Angular fetching data on ngOnInit requires refreshing the component
问题
我想将获取的数据分配给一个变量，但该变量在我不刷新页面的情况下记录为空。
我目前有这个：
ngOnInit(): void {
this.fetchLocalUser();
}
fetchLocalUser() {
this.user = this.userService.getLocalUser();
}
但当我在HTML中记录或打印用户时，除非我刷新页面，否则它返回null。
英文:
I wanted to assign a fetched data to a variable but the variable logs as null unless I refresh the page.
I currently have this:
ngOnInit(): void {
this.fetchLocalUser();
}
fetchLocalUser() {
this.user = this.userService.getLocalUser();
}
}
but when I log or print the user in the html, it returns null unless I refresh the page.
答案1
得分: 1
"Maybe you need to subscribe to service?
fetchLocalUser() {
this.userService.getLocalUser()
.subscribe(data => this.user = data);
}"
英文:
Maybe you need to subscribe to service?
fetchLocalUser() {
this.userService.getLocalUser()
.subscribe(data => this.user = data);
}
答案2
得分: 0
为了确保获取的数据被分配给user变量并立即可访问，您可以在fetchLocalUser()方法中使用.subscribe()方法。以下是更新后的代码片段：
ngOnInit(): void {
this.fetchLocalUser();
}
fetchLocalUser() {
this.userService.getLocalUser().subscribe((data) => {
this.user = data;
// 可以在这里放置与获取的数据相关的附加代码或逻辑
});
}
通过订阅userService.getLocalUser()可观察对象，您可以接收可观察对象发出的数据，并在回调函数中将其分配给user变量。这确保了变量将立即包含获取的数据，使您能够在HTML中使用它，而无需刷新页面。
英文:
To ensure that the fetched data is assigned to the user variable and accessible immediately, you can use the .subscribe() method in the fetchLocalUser() method. Here's an updated code snippet:
ngOnInit(): void {
this.fetchLocalUser();
}
fetchLocalUser() {
this.userService.getLocalUser().subscribe((data) => {
this.user = data;
// Additional code or logic related to the fetched data can be placed here
});
}
By subscribing to the userService.getLocalUser() observable, you can receive the data emitted by the observable and assign it to the user variable within the callback function. This ensures that the variable will contain the fetched data immediately, allowing you to use it in your HTML without needing to refresh the page.
答案3
得分: 0
以下是您提供的内容的中文翻译：
我有一个Firebase Web应用程序，它做了类似的事情。在我的情况下，我有一个用户服务，它采用回调模式，每个页面都可以订阅。
由于服务的生命周期比每个页面都要长，因此有时我可能希望手动从服务器刷新用户数据。
ngOnInit(): void {
this.firebaseListener = this.firebase.subscribeUser(user => {
if (user) {
this.user = user
// 进行用户操作...
}
})
}
subscribeUser(callback: (u: Users.Doc) => void) {
const listener = this.userSubject.subscribe(callback)
callback(this.userData)
return listener
}
async refreshUser() {
const userDoc = await getDoc(doc(this.db!, 'users', this.user!.uid))
const data = userDoc.data() as Users.Doc
this.userData = data;
this.userSubject.next(this.userData)
}
请注意，我已经保留了原始代码中的HTML转义字符（如>），以保持代码的完整性。
英文:
I have a Firebase web app which does something similar. In my case I have a user service implemented with a callback pattern that each page can subscribe to.
There's a small callback abstraction since the service lives longer than each page, so there are times when I may want to manually refresh user data from the server.
ngOnInit(): void {
this.firebaseListener = this.firebase.subscribeUser(user => {
if (user) {
this.user = user
// do user stuff...
}
})
}
subscribeUser(callback: (u: Users.Doc) => void) {
const listener = this.userSubject.subscribe(callback)
callback(this.userData)
return listener
}
async refreshUser() {
const userDoc = await getDoc(doc(this.db!, 'users', this.user!.uid))
const data = userDoc.data() as Users.Doc
this.userData = data;
this.userSubject.next(this.userData)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论