在angular2中调用typescript getter

Question

我想从angular2模板中调用typescript属性.如果我在循环中调用对象的属性,我不能这样做.如果没有循环,代码工作正常.

从Angular 2类内部模板调用方法,如果没有循环,这个问题可以解决问题.

请在这里找到Plunker .

import {Component} from '@angular/core'

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

 // if I call {{user.name}} nothing gets printed.
 get name() {
    return "My name is:" + this.first_name;
  }
}

@Component({
  selector: 'my-app',
  template: `
    <ion-list *ngFor="let user of users">
        <div>{{user.first_name}}</div>
    </ion-list>
  `
})
export class App {
  users: User[];
  constructor() {
    this.users = [ {first_name:"Jagan"}, {first_name:"Nath"}  ];
  }
}

更新

这是一段代码.工作版和非工作版都在下面给出.

//our root app component
import {Component, Input} from '@angular/core'
import { MyComponent } from './my-component';


export class User {

  first_name : string;

  get name() {
    return "Name:" + this.first_name;
  }
}


@Component({
  selector: 'my-app',
  template: `
    <div>
       {{user.first_name}}
    </div>
  `,
  directives: [ MyComponent ]
})   

export class App {

  constructor() {
    let str = "{ \"first_name\" : \"Jagan\" }";
    this.user = JSON.parse(str) as User;
  }
}

// 这不起作用

 /* @Component({
      selector: 'my-app',
      template: `
        <div>
           {{user.name}}
        </div>
      `,
      directives: [ MyComponent ]
    })
    */

Answer 1

UPDATE

在您更新的代码中,您只是告诉TypeScript,您现在拥有的任何JSON对象都应被视为User对象.TypeScript会很乐意为您解析,但在运行时,您实际上并没有User对象,正如您无法访问该name方法所证明的那样.您只需将对象打印到控制台即可自行检查对象:console.log(this.user).你会看到它打印出来Object {first_name: "Jagan"}.这显然不是一个User对象.

我建议创建一个User接受JSON参数的构造函数,并让User对象使用此JSON配置自身.我创建了一个Plunker,让你看到实际的想法:Plunker - 更新

该User会得到一个接受JSON配置(你甚至可以键入如果你想)构造函数:

constructor(config: any) {
  this.first_name = config.first_name;
}

在构造时User,您在其构造函数中传递配置:

let obj = { first_name: 'Jagan' };
this.user = new User(obj);

原版的

创建时new User,应使用构造函数来设置新User对象的参数.在当前情况下,您只需通过键入将一些新对象(甚至User对象)推送到users阵列上{first_name: "name"}.您可以通过将users阵列打印到控制台(即:)来检查当前代码中的内容console.log(users).

我创建了一个带有构造函数的Plunker User:Plunker.

该User会得到一个构造函数:

 constructor(first_name: string) {
   this.first_name = first_name;
 }

new User现在调用需要一个新的参数first_name:

this.users = [ new User("Jagan"), new User("Nath")  ];