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);

<强> ORIGINAL

创建new User时，应使用构造函数设置新User对象的参数。在当前情况下，您只需键入User将一些新对象（甚至不是users个对象）推送到{first_name: "name"}数组。您可以通过将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属性

在angular2中调用typescript getter

2 个答案: