Вызов машинописного getter в angular2

Question

Я хотел бы назвать свойство машинописного текста из шаблона angular2. Я не могу этого сделать, если я вызову свойство объекта в цикле. Если цикл отсутствует, код работает нормально.

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"} ]; 
    } 
} 

Update

Вот кусок кода. Ниже приведена как рабочая, так и не рабочая версия.

//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

В обновленном коде, который вы просто говорите машинопись, что все 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)).

Я создал 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") ]; 

Answer 2

Этот код:

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

typechecks потому что машинописный является структурным (более: https://basarat.gitbooks.io/typescript/content/docs/why-typescript.html), однако это не создает User. Вы должны new User получить get name недвижимости