在 Angular 9 中调用 ngFor 内的函数丢失上下文

Question

我已经将我的 Angular 项目从 8.3 更新到 angular 9，但现在我正在丢失在 ngFor 中调用的函数中的上下文。我使用 apply 来设置我的上下文：

<div *ngFor="let item of myMenu;">
  <button (click)="item.function.apply(this, [item])">{{item.label}}</button>
</div>

在我的 ts 中，我这样设置我的数组：

this.myMenu.push({
  id: '1',
  label: 'ONE',
  function: this.one
});
this.myMenu.push({
  id: '2',
  label: 'TWO',
  function: this.two
});

这些是我要调用的函数：

  myThisOne: 'One';
  myThisTwo: 'Two';

  one(item) {
    console.log('id: ' + item.id + ', myThisOne: ' + this.myThisOne);
  }

  two(item) {
    console.log('id: ' + item.id + ', myThisTwo: ' + this.myThisTwo);
  }

但我得到 未定义。我无法在我的 AppComponent 中读取我的变量，在控制台中：

id: 1, myThisOne: undefined
id: 2, myThisTwo: undefined

Angular9 有什么变化？我如何在我的函数中使用它？您可以在 stackblitz.

上试用

Answer 1

使用 apply 方法一切正常，以下代码有问题：

myThisOne: 'One';
myThisTwo: 'Two';

使用上面的语法，您定义了 myThisOne 和 myThisTwo 以及它们的类型，但您没有初始化它们。如果我理解你的意图，代码应该是：

myThisOne = 'One';
myThisTwo = 'Two';

Answer 2

您可以使用 bind 方法将函数绑定到 this 上下文。

 this.myMenu.push({
  id: '1',
  label: 'ONE',
  function: this.one.bind(this)
});
this.myMenu.push({
  id: '2',
  label: 'TWO',
  function: this.two.bind(this)
});

在模板中，您需要进行以下更改。

<div *ngFor="let item of myMenu;">
  <button (click)="item.function(item)">{{item.label}}</button>
</div>

Answer 3

你没有提供很多信息所以我假设 one() 和 two() 这两个函数都在 Component.ts 文件。就是说。

您想更改函数中的上下文以指向每个项目。但在这里我看到 myThisOne = 'One'; myThisTwo = 'Two';（由@Alon 指出）在您的组件中定义，因此如果您尝试从其中一项访问它们，它们将是 undefined。

您应该将它们添加到您的项目中。这样你的绑定就可以工作了。

 this.myMenu.push({
  id: '1',
  myThisOne: 'one', // here
  label: 'ONE',
  function: this.one.bind(this)
});
this.myMenu.push({
  id: '2',
  myThisTwo: 'two', // and here
  label: 'TWO',
  function: this.two.bind(this)
});

在 Angular 9 中调用 ngFor 内的函数丢失上下文

Call a function inside ngFor in Angular 9 lose context

this

apply

ngfor

angular

angular9