Я не могу получить доступ к классу Typescript с помощью «this» после ngClick - PullRequest
Новая
       29

Я не могу получить доступ к классу Typescript с помощью «this» после ngClick

0 голосов
/ 09 июля 2019

Я пытаюсь получить доступ к своему классу после (щелчка) шаблона в Angular2 +, но когда я пишу console.log (this), я получаю объект DOM.

Позвольте мне показать вам мой код: 

deleteClient(row: Client, event: any): void
{

  console.log(this);
  console.log(event);
  console.log(this.notificationService);

  this.notificationService.open(...);

}

/* Aditional columns for clients. */
addAditionalColumns(): SpeerdListAdditionalColumn[]{

  let addAditionalColumns = [{
      label: "Delete",
      icon: "far fa-trash-alt",
      onclick: this.deleteClient,
      textAlign: 'center'
  }];

  return addAditionalColumns;
}

Это мой шаблон; list.tpl. Я делаю NgFor с возвращением offAditionalColumns (). 

<!-- Additional columns -->
<ng-container *ngFor="let additionalColumn of additionalColumns" [cdkColumnDef]="additionalColumn.label">
       <!-- Head columns -->
       <cdk-header-cell *cdkHeaderCellDef [ngStyle]="{'text-align': additionalColumn.textAlign}">
               {{additionalColumn.label}} 
       </cdk-header-cell>
       <!-- Body columns -->
       <cdk-cell *cdkCellDef="let row" [ngStyle]="{'text-align': additionalColumn.textAlign}"> 
              <i (click)="$event.stopPropagation(); additionalColumn.onclick(row, $event);" class="{{additionalColumn.icon}}"></i> 
       </cdk-cell>
</ng-container>

Что я получаю с помощью console.log (this) в функции deleteClient: 

 {label: "Borrar", icon: "far fa-trash-alt", onclick: ƒ, textAlign: "center"}

И мне нужен экземпляр ComponentClass. Как я могу получить доступ к экземпляру класса?

Код: https://stackblitz.com/edit/angular-votuyc?embed=1&file=src/app/app.component.ts

1 Ответ

1 голос
/ 09 июля 2019

Вы можете использовать функцию сокращенной стрелки, чтобы сделать это для определения вашего метода. Что-то вроде: 

deleteClient = (row: Client, event: any): void => { 
    //this now refers to the component instance
}

Подробнее об этом операторе см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

...