从模板中的 Angular 2 class 调用方法

Question

我有一个 angular 2 应用程序，它有一个名为 User 的 class。此用户有一个名为 deleted_at 的属性，它是 null 或包含日期时间，显然如果 deleted_at 属性不是 null，则用户将被删除.这是我的 user.ts 文件的样子：

User.ts

export class User {
    id: number;
    email: string;
    created_at: string;
    first_name: string;
    last_name: string;
    deleted_at: any;

    name() {
        if (this.deleted_at === null) {
            return this.first_name;
        } else {
            return 'DELETED';
        }
    }
}

现在我希望我可以用简单的一行在我的模板中调用名称：

{{ user.name }}

这可是returns没什么，你怎么能调用angular2模板中的某些函数呢？或者这是不允许的？

编辑： 稍微清理一下，这是我在组件 user 中使用的 class User -list.component.ts，多个用户在该组件中处理。

Answer 1

要么你这样调用方法：

{{user.name()}} // instead of {{user.name}}

对于这种方法，您需要注意您将失去执行上下文 (this)。有关详细信息，请参阅此问题：

或者您将方法定义为 getter，这样您就可以在模板中使用 user.name：

get name() {
  if (this.deleted_at === null) {
    return this.first_name;
  } else {
    return 'DELETED';
  }
}

Answer 2

如果您引用的模板来自您上面的组件，您可以简单地执行 {{ name() }}。在 Angular 2 中，您不必像在 Angular 1 中那样首先引用您的组件来调用方法。如果您的 class 只是您在组件中声明的模型，您必须首先获取对该模型的引用，然后调用您的方法 {{ user.name() }}。但是，如果您的方法只是一个普通的 getter，我将只访问 public 属性而不是在那里调用方法。

从模板中的 Angular 2 class 调用方法

Calling method from a Angular 2 class inside template

angular2-template

angular