在 angular2 中调用 typescript getter

Question

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

Calling method from a Angular 2 class inside template 这个问题解决了没有循环的问题。

请找到 Plunker here 。

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

更新

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

我建议在User 上创建一个接受JSON 参数的构造函数，并让User 对象使用此JSON 进行自我配置。我创建了一个 Plunker 供您查看该想法的实际效果：Plunker - updated

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 对象的参数。在当前情况下，您只是通过键入{first_name: "name"} 将一些新对象（甚至不是User 对象）推送到users 数组中。您可以通过将users 数组打印到您的控制台（即：console.log(users)）来检查当前代码。

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

User 将获得一个构造函数：

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

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

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

Answer 2

这段代码：

this.users = [ {first_name:"Jagan"}, {first_name:"Nath"}  ];

typechecks 因为 typescript 是结构化的（更多：https://basarat.gitbooks.io/typescript/content/docs/why-typescript.html）但是它不会创建User。你需要new User 来获取get name 属性?