我想将数组传递给组件模板中的函数。
这是我的工具栏:
的 toolbar.component.html
<div *ngFor="let item of items">
<button mat-mini-fab [style.color]="item.color"
(click)="item.command(...item.commandParams)">
<i class="material-icons">{{item.icon}}</mat-icon>
</button>
</div>
toolbar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-toolbar',
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent implements OnInit {
items: ToolBarItem[]
constructor() {
}
ngOnInit() {
}
}
export class ToolBarItem {
icon = 'border_clear';
color: string;
command: () => void;
commandParams: any[];
}
这里我想用不同的命令初始化工具栏的项目。
的 main.ts
...
items: [
{
icon: 'mode_edit',
color: 'blue',
command: (name, family) => {
console.log('editClick!' + name + family);
},
commandParams: ['mohammad', 'farahmand'],
},
{
icon: 'delete',
color: 'red',
command: () => {
console.log('deleteClick!');
},
}
],
...
但是我收到了这个错误:
错误:模板解析错误:解析器错误:意外的令牌。在 [item.command(... item.commandParams)]中的第14列......
答案 0 :(得分:4)
您不太可能在模板中使用此语法(有许多有效的打字稿构造在模板中不起作用)。
您可以在组件中编写一个辅助方法,它将该项作为参数,然后进行适当的调用,例如:
public doCommand(item: ToolbarItem): void {
item.command(...item.commandParams);
}
然后将模板更改为:
(click)="doCommand(item)"
答案 1 :(得分:0)
在组件中写入吸气剂
public get items(): ToolBarItem[] {
return ...this.item.commandParams; // or whatever You need
}
模板HTML
<a (click)="yourMethod(items)">...</a>
答案 2 :(得分:-2)
你只需要编写“item.commandParams”,这已经是一个数组,因为你宣称它为“commandParams:['mohammad','farahmand']”。
你不需要3个点!