Question

我正在关注this link，以了解如何使用服务在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.
  }

}

我尝试了三种更新博客列表的方法

fat箭头作为回调。这行得通！
定义一个常数，并为其分配一个粗箭头功能。传递给订阅功能。它也可以工作，就像选项1一样。据我所知，它们的行为相同。
定义相同类（组件）中的方法。用作预订功能的回调。该方法被调用。但是this关键字似乎没有引用组件。为什么不同？我了解在javascript世界中，function关键字为您提供了完全不同的this。但是，为什么它会在TypeScript中的类方法中发生？为什么this在这里表示不同的对象？为什么胖箭头起作用？

我之前一直在寻找答案，但是没有运气。（我一定没有使用正确的关键字）。感谢您的帮助！

Answer 1

胖箭头函数始终绑定到定义它们的对象，函数将绑定到调用它们的对象。将您的处理程序更改为箭头功能。

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>

那么您就可以为您管理订阅了，而不必担心孤立订阅。

Angular：为什么我不能使用组件的方法作为可观察的回调来更新组件的属性？

1 个答案: