Вызов функции внутри ngFor в Angular 9 потерять контекст - PullRequest
Новая
       66

Вызов функции внутри ngFor в Angular 9 потерять контекст

1 голос
/ 24 февраля 2020

Я обновил свой 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);
  }

Но я получаю undefined . Я не могу прочитать мои переменные в моем AppComponent, в консоли: 

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

Что это изменило в Angular 9? Как я могу использовать это в моей функции? Вы можете попробовать это на stackblitz .

Ответы [ 3 ]

1 голос
/ 24 февраля 2020

Вы можете использовать метод 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>
1 голос
/ 24 февраля 2020

Вы не предоставили много информации, поэтому я предполагаю, что обе функции 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)
});
0 голосов
/ 24 февраля 2020

Все должно работать нормально с методом apply, есть проблема в следующем коде: 

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

С приведенным выше синтаксисом вы определяете myThisOne и myThisTwo и их типы, но Вы не инициализируете их. Если я понимаю ваше намерение, код должен быть: 

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