如何在角度组件模板中使用Spread Operator [英] How to use Spread Operator in angular component template
问题描述
我想从组件模板将数组传递给函数.
这是我的工具栏:
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列
不太可能使这种语法在模板中工作(有很多有效的打字稿结构在模板中不起作用)./p>
您可以改为在组件中编写一个辅助方法,该方法将该项作为参数,然后进行适当的调用,例如:
public doCommand(item: ToolbarItem): void {
item.command(...item.commandParams);
}
,然后将模板更改为:
(click)="doCommand(item)"
I want to pass an array to a function from component template.
This is my toolbar:
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[];
}
Here I want to init items of toolbar with varies commands.
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!');
},
}
],
...
But i get this error:
Error: Template parse errors: Parser Error: Unexpected token . at column 14 in [item.command(...item.commandParams)] in ...
It's unlikely that you're going to get this syntax to work in a template (there are many valid typescript constructs that don't work in templates).
You could write a helper method in the component instead, that takes the item as an argument, and then makes the appropriate call, as in, for example:
public doCommand(item: ToolbarItem): void {
item.command(...item.commandParams);
}
and then change your template to:
(click)="doCommand(item)"
这篇关于如何在角度组件模板中使用Spread Operator的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!