如何在angular material table中调用用户定义的方法？

Question

如何在angular materialtable中调用用户定义的方法？我正在使用 class 对象而不是接口，当我调用该方法时它不起作用。我能够显示属性但不能显示方法输出。

这是代码片段。

export class User implements IUser {

constructor(public id:number, public email: string,
  public first_name: string, public last_name: string, public avatar: string) {
    console.error("Construcor Eroor.")
  }

  upper(): string {
    console.log(this.email.toUpperCase())
    return this.email.toUpperCase();
  }
}



<ng-container matColumnDef="upper">
    <mat-header-cell *matHeaderCellDef>
        upper
    </mat-header-cell>
    <mat-cell *matCellDef="let user ">
        {{user.upper}} <!-- calling a method in the User class -->
    </mat-cell>
</ng-container>

这是完整的 stackblitz link。 https://stackblitz.com/edit/angular-material-reactive-table-ddcsq4

Answer 1

修改后的代码如下：

app.component.html:

<hello [name]='name'></hello>
<app-sample></app-sample>

使用上面编辑的代码，您将能够看到 name 为 Angular:

希望对您有所帮助！！！

Answer 2

您应该将来自您的服务 (sampleSvc) 的响应映射到一个 User 对象数组中，这样您就可以访问 User 实例，从而可以调用 upper() 方法来自 User class.

this.sampleSvc.findByKey(key).subscribe(data => {
  const users = data.map(obj => new User(
    obj.id,
    obj.email,
    obj.first_name,
    obj.last_name,
    obj.avatar,
  ));
  this.userSubject.next(users);
});

此外，在您的模板 component.html 上，您需要调用 upper() 方法

<ng-container matColumnDef="upper">
  <mat-header-cell *matHeaderCellDef>
    upper
  </mat-header-cell>
  <mat-cell *matCellDef="let user ">
    {{user.upper()}}
  </mat-cell>
</ng-container>

我已经在 here 的演示中修复了它。

如何在angular material table中调用用户定义的方法？

How to call a user defined method in angular material table?

typescript

angular2-template