Angular 9 使用 Ivy，调用这样的函数时出现问题 [function]()

Question

我对 Angular 9 和 Ivy 有疑问。我声明了一个简单的组件：

.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)

"unique" 部分正常工作，当我停用 Ivy 编译器时（tscongif.app.json / angularCompilerOptions / enableIvy: false），两种情况都正常工作。

可能是我漏掉了什么，可能是Ivy的bug，所以在这里请大家帮忙理解一下！

这是 Git 存储库，用于测试：https://github.com/sylro/ivy-component-inheritance

谢谢大家！

Answer 1

因为您将其作为字符串获取，并且 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>

Angular 9 使用 Ivy，调用这样的函数时出现问题 [function]()

Angular 9 with Ivy, problem when calling a function like this[function]()

angular

ivy