Angular 9 с Ivy, проблема при вызове функции, подобной этой [function] () - PullRequest
0 голосов
/ 26 апреля 2020

У меня проблема с Angular 9 и Айви. Я объявил простой компонент:

. html

<p>list : not working</p>
<button *ngFor="let act of actions" (click)="this[act]()">{{act}}</button>
<p>unique : working</p>
<button (click)="this[action]()">{{action}}</button>

.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-new-comp',
  templateUrl: './new-comp.component.html',
  styleUrls: ['./new-comp.component.css']
})
export class NewCompComponent implements OnInit {

  action: string = "testAction";
  actions = ["testAction", "anotherTestAction"]

  constructor() { }

  ngOnInit(): void {
  }

  testAction() {
    console.log("ok");
  }

  anotherTestAction() {
    console.log("another ok");
  }
}

Суть в том, чтобы вызывать функции в общем (например, с абстракцией компонента). , вот простой способ воспроизвести!) и часть ngFor не работает, с ошибкой javascript, когда я нажимаю кнопки:

core.js:6210 ERROR TypeError: Cannot read property '15' of null
    at walkUpViews (core.js:4373)
    at nextContextImpl (core.js:4362)
    at Module.ɵɵnextContext (core.js:22001)
    at NewCompComponent_button_2_Template_button_click_0_listener (new-comp.component.html:2)
    at executeListenerWithErrorHandling (core.js:21915)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21957)
    at HTMLButtonElement.<anonymous> (platform-browser.js:976)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41762)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)

"Уникальная" часть работает Кстати, и когда я деактивирую компилятор Ivy (tscongif.app. json / angularCompilerOptions / enableIvy: false), оба случая работают.

Может быть, я что-то пропустил, может быть, это ошибка Ivy, так что я здесь попросить помощи, чтобы понять!

Это репо Git, для тестирования: https://github.com/sylro/ivy-component-inheritance

Спасибо всем!

1 Ответ

1 голос
/ 26 апреля 2020

Потому что вы получаете его как строку, и нет действительного синтаксиса для string (). Можно попробовать создать key: value пары со ссылкой на функцию

export class NewCompComponent implements OnInit {

  actions = [ 
              { name: "testAction", action: testAction },
              { name: "anotherTestAction", action: anotherTestAction } 
            ];

  constructor() { }

  ngOnInit(): void {
  }

  testAction() {
    console.log("ok");
  }

  anotherTestAction() {
    console.log("another ok");
  }
}

, а на шаблоне есть код типа

<p>list : not working</p>
<button *ngFor="let act of actions" (click)="act.action()">{{act.key}}</button>
<p>unique : working</p>
...