如何在角度组件模板

时间:2018-03-15 14:08:45

标签: angular

我想将数组传递给组件模板中的函数。
这是我的工具栏:
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列......

3 个答案:

答案 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个点!