Angular 9 使用 Ivy,调用这样的函数时出现问题 [function]()
Angular 9 with Ivy, problem when calling a function like this[function]()
我对 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
谢谢大家!
因为您将其作为字符串获取,并且 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 有疑问。我声明了一个简单的组件:
.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
谢谢大家!
因为您将其作为字符串获取,并且 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>