在组件中调用带参数的函数

Posted 2023-02-23

【中文标题】在组件中调用带参数的函数

【英文标题】：call function with parameter in component

【发布时间】：2017-11-28 19:19:22

【问题描述】：

我对 angular2 的了解为零，但试图向现有代码添加功能。

这是组件中的函数调用：

<a (click)="somefunction()">TEST</a>

我想用参数调用它。怎么做？因为像这样传递它是行不通的：(click)="somefunction(something='test')

【参考方案1】：

调用函数时不需要分配变量，因为输入应该在 javascript 中处理。以下代码假设您使用的是同一组件中的 ts 和 html。

我快速整理了一个组件来帮助您了解上下文。

HTML

        <tr *ngFor="let staff of allStaff">
            <td>staff.name</td>
            <td>staff.position</td>
            <td>staff.created_at</td>
            <td><button (click)="here(staff)"><span>View</span></button>
        </tr>

TS

import  Component, AfterViewChecked  from '@angular/core';
import  StaffService  from '../staff.service';

import  Staff  from '../staff';

@Component(
  templateUrl: './view-all.component.html'
)

export class ViewAllComponent 
  allStaff: Staff[];

  constructor(
    private staffService: StaffService,
  ) 
    this.getAllStaff();
  ;

  getAllStaff(): void 
    this.staffService.getAllStaff().then(res => this.allStaff = res);
  ;

  here(staff: Staff): void 
    console.log(staff);