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

를 얻을 수 new User해야합니다. TypeScript는 여러분을 위해 행복하게 파싱 할 것입니다. 그러나 메서드에 액세스 할 수 없다는 사실처럼 런타임에는 실제로 User 개체가 없습니다. 콘솔에 인쇄하여 객체를 직접 검사 할 수 있습니다 : console.log(this.user). Object {first_name: "Jagan"}이 인쇄 된 것을 볼 수 있습니다. 그건 분명히 User 개체가 아닙니다.

User에 JSON 매개 변수를 받아들이고이 JSON을 사용하여 User 개체를 구성하는 생성자를 만드는 것이 좋습니다. 당신이 행동에서 아이디어를 볼 수 있도록 내가 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 개체의 매개 변수를 설정해야합니다. 현재 상황에서는 {first_name: "name"}을 입력하여 users 배열에 새로운 객체 (User 객체조차도 포함하지 않음)를 밀어 넣기 만하면됩니다. users 배열을 콘솔 (즉, console.log(users))에 인쇄하면 현재 코드에서 그 코드를 확인할 수 있습니다.

User : Plunker에 생성자가있는 Plunker를 만들었습니다.

User는 생성자를 얻을 것이다 : OK

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

Answer 2

이 코드 :

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

typechecks 타이프 구조적 때문에 (기타 : https://basarat.gitbooks.io/typescript/content/docs/why-typescript.html) 그러나이 User을 생성하지 않는다. 당신은 당신이 당신이 지금 User 대상으로 고려되어야한다 무엇 이건 JSON 오브젝트 것을 타이프 라이터를 말하고있다 업데이트 된 코드에서 업데이트 get name 재산