web-dev-qa-db-ja.com

Angular 2テンプレート内のクラスからメソッドを呼び出す

Userというクラスを持つangular 2アプリケーションがあります。このユーザーには、nullまたはdatetimeを含むdeleted_atという属性があります。deleted_atプロパティがnull。これは、user.tsファイルの外観です。

ser.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 }}

ただし、これは何も返しません。angular 2テンプレートで特定の関数をどのように呼び出すことができますか？これは許可されていませんか？

編集：少し整理するため、これはコンポーネントで使用しているクラスのユーザーですser-list.component.ts、このコンポーネントでは複数のユーザーが処理されます。

angularangular2-template
23
hY8vVpf3tyR57Xib

次のようにメソッドを呼び出します。

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

このアプローチでは、実行コンテキスト（this）が失われることに注意する必要があります。詳細については、この質問を参照してください。

または、メソッドをゲッターとして定義して、user.nameテンプレート内：

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

参照しているテンプレートが上記のコンポーネントのものである場合は、{{ name() }}を実行するだけで済みます。 Angular 2では、最初にコンポーネントを参照してメソッドを呼び出す必要はありません。Angular 1の場合。クラスが単なるモデルの場合コンポーネントで宣言したことを確認するには、最初にそのモデルへの参照を取得してから、メソッド{{ user.name() }}を呼び出す必要があります。ただし、メソッドが単なるgetterである場合は、そこでメソッドを呼び出します。

0
LordTribual