Question

我正在使用Angular 7，并且有一个带有服务的组件：

在我的组件中，我有一个调用服务函数的函数：

setselectedFiles

服务功能为：

function handleAcceptedFiles(files) {
  files.map((file) =>
    Object.assign(file, {
      preview: URL.createObjectURL(file),
      formattedSize: formatBytes(file.size),
    })
  )
  setselectedFiles([...files])
}

我组件中的功能export class ProfileComponent implements OnInit, OnDestroy { [...] public deleteCar(nameCar: string) { this.carService.deleteCar(nameCar, this.errorDeleteCar, this.successDeleteCarAndUpdateView); } [...] }是：

export class CarService
{
[...]

public deleteCar(offerId: string, errorDeleteCar: (error: HttpErrorResponse) => void, successDeleteCarAndUpdateView: (nameCar: string) => void):void
  {
    this.deleteFavoriteService(nameCar)
      .subscribe(
        () =>
        {
          successDeleteCarAndUpdateView(nameCar);
        },
        (error) =>
        {
          errorDeleteCar(error);
        }
      );
  }

[...]
}

我无法致电successDeleteCarAndUpdateView，并且收到以下消息：

export class ProfileComponent implements OnInit, OnDestroy
{
[...]
public successDeleteCarAndUpdateView(nameCar: string): void
{

   console.log("This is printed");
   this.updateCache(nameCar);
   [...]
 }

public updateCache(nameCar: string): void
{

   [...]
 }

[...]
}

但是console.log可以工作。

但是当我以正常方式调用函数时，例如从构造函数中调用时，我没有问题。

完整的消息错误是：

updateCache

Answer 1

您可以通过以下方法解决此问题：

this.carService.deleteCar(nameCar, this.errorDeleteCar.bind(this), this.successDeleteCarAndUpdateView.bind(this));

使函数具有绑定到它们的正确this上下文...

否则这也将起作用，因为箭头功能将保留正确的this上下文：

this.carService.deleteCar(nameCar, (err) => this.errorDeleteCar(err), (resp) => this.successDeleteCarAndUpdateView(resp));

但是我建议在您的服务中像这样进行重组...

// return the observable.
public deleteCar(offerId: string):void
{
  return this.deleteFavoriteService(nameCar);
}

在组件中，订阅...

  public deleteCar(nameCar: string)
  {
    this.carService.deleteCar(nameCar).subscribe(
      (response) => this.successDeleteCarAndUpdateView(response),
      (err) => this.errorDeleteCar(err), 
    );
  }

更新视图是组件的工作，因此将其留在组件中。让服务完成其工作，调用API。

Answer 2

good_lines = [l for l in links if '.com' in l] with open('fname.txt') as fout: [fout.write(g) for g in goodlines]中this的上下文已经丢失，因为该方法在服务public successDeleteCarAndUpdateView()中作为回调被调用。

您可以在这里尝试两件事。

将.subscribe绑定到方法本身以保留其组件上下文

this

将服务重构为仅进行HTTP调用，然后将Component交还给它一个可以订阅的Observable。这可以帮助维护上下文并避免出现此类回调问题。

Angular 7调用服务，其内部包含调用另一个函数的调用函数

2 个答案: