![](/img/trans.png)
[英]Why can't I update the state of my component from within a useEffect callback?
[英]Angular: why can't I use a method of my component as an obserable callback to update properties in the component?
我正在关注此链接 ,了解如何使用服务在Angular中发出http请求并更新组件中的项目列表。 我可以使用胖箭头功能作为可观察的回调成功完成此操作。 但是,当我尝试在组件中使用一种方法时,它无法更新项目列表。
例如:
import { Component, OnInit } from '@angular/core';
import { BlogService } from '../blog.service';
import { Blog } from '../blog';
import { Observable, of } from 'rxjs';
@Component({
selector: 'app-articles',
templateUrl: './articles.component.html',
styleUrls: ['./articles.component.css']
})
export class ArticlesComponent implements OnInit {
blogs: Blog[];
constructor(private blogService: BlogService) { }
ngOnInit() {
// const handler = (incomingBlogs: Blog[]) => {
// this.blogs = incomingBlogs;
// console.log("we get: ", this.blogs);
// }
const observable: Observable<Blog[]> = this.blogService.getBlogs();
// observable.subscribe(handler); <===== this will work
// observable.subscribe(incomingBlogs => {this.blogs = incomingBlogs; console.log("fat get: ", this.blogs);}); <====== this also work
observable.subscribe(this.handler); // <===== this failed.
console.log("this in init", this);
}
handler(incomingBlogs: Blog[]) {
this.blogs = incomingBlogs;
console.log("we get: ", this.blogs);
console.log("this in handler", this); //seems the this keyword refers to something different than the object itself.
}
}
我尝试了三种方法来更新博客列表
订阅中的粗箭头作为回调。 这可行!
定义一个常量并为其分配一个粗箭头功能。 传递给订阅功能。 它也可以工作,就像选项1一样。据我所知,它们的行为相同。
在同一类(组件)中定义一个方法。 用作预订功能的回调。 该方法被调用。 但是this
关键字似乎并不指向组件。 为什么不同? 我了解在javascript的世界中,function关键字this
提供了完全不同的this
。 但是,为什么它会在TypeScript中的类方法中发生? 为什么this
意味着这里有不同的对象? 为什么胖箭头起作用?
我之前一直在寻找答案,但是没有运气。 (我一定没有使用正确的关键字)。 谢谢你的帮助!
粗箭头函数始终绑定到定义它们的对象,函数将绑定到调用它们的对象。 将处理程序更改为箭头功能。
handler = (incomingBlogs: Blog[]) => {
this.blogs = incomingBlogs;
console.log("we get: ", this.blogs);
console.log("this in handler", this); //seems the this keyword refers to something different than the object itself.
}
如果在当前函数中放置一个断点,您将看到它指向从中调用的可观察对象。
如果您想使用普通功能,可以将其作为参数传递
handler(incomingBlogs: Blog[], controller: ArticlesComponent) {
controller.blogs = incomingBlogs;
console.log("we get: ", controller.blogs);
console.log("this in handler", controller); //seems the this keyword refers to something different than the object itself.
}
但是我的建议是不要在控制器中订阅可观察对象,并在视图中使用异步管道。
blogs$ = this.blogService.getBlogs();
在您的TypeScript和视图中
<ng-container *ngIf="blogs$ | async as blogs">
Use blogs here as you would have before
{{blogs | json}}
</ng-container>
然后,您便可以使用视图为您管理订阅,而不必担心孤立订阅。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.