使用 Typescript 在 Angular 2 中获取属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37299649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get properties in Angular 2 using Typescript
提问by Magnus Wallstr?m
I'm trying to make the property fullNamedisplay the first and the last name. How to make the get property to work?
我正在尝试使该属性fullName显示名字和姓氏。如何使 get 属性起作用？
See this Plunk.
看到这个Plunk。
import { Component } from '@angular/core';
export class Person {
id: number;
firstName: string;
lastName: string;
get fullName(): string {
return this.firstName + ' ' + this.lastName;
}
}
@Component({
selector: 'my-app',
template:`
<h1>{{title}}</h1>
<p>My first name is {{person.firstName}}</p>
<p>My last name is {{person.lastName}}</p>
<h2>My full name is {{person.fullName}}!</h2>`
})
export class AppComponent {
title = 'Get property issue';
person: Person = {
id: 1,
firstName: 'This',
lastName: 'That'
};
}
EDITWhat I actually wanted to achieve was how to use get properties when calling a service and subscribing for the result. But I managed to figure it out based on below answers. Thanks!
编辑我真正想要实现的是如何在调用服务和订阅结果时使用获取属性。但我设法根据以下答案弄清楚了。谢谢！
See my updated plunk
查看我更新的plunk
回答by Ankit Singh
Try this
试试这个
import { Component } from '@angular/core';
export class Person {
constructor(public id: number,public firstName: string, public lastName: string){}
get fullName(): string {
return this.firstName + ' ' + this.lastName;
}
}
@Component({
selector: 'my-app',
template:`
<h1>{{title}}</h1>
<p>My first name is {{person.firstName}}</p>
<p>My last name is {{person.lastName}}</p>
<h2>My full name is {{person.fullName}}!</h2>
`
})
export class AppComponent {
title = 'Get property issue';
person: Person = new Person( 1, 'This', 'That');
}
回答by Thierry Templier
You need to instantiate the Persontype:
您需要实例化Person类型：
constructor() {
this.person = new Person();
this.person.id = 1;
this.person.firstName = 'This';
this.person.lastName = 'That';
}
In your case, the personproperty conforms to the Persontype (at the structure level) but it's not actually an instance of the Persontype since you define the object literally. This means that you need to define all the properties in your literal object and you won't be able to use the fullNamegetter since it's not part of this object. It's a kind of cast.
在您的情况下，该person属性符合Person类型（在结构级别），但它实际上不是该Person类型的实例，因为您按字面定义了对象。这意味着您需要定义文字对象中的所有属性，并且您将无法使用fullNamegetter，因为它不是该对象的一部分。这是一种演员阵容。
Use the following for convenience:
为方便起见，请使用以下内容：
export class Person {
constructor(public id: number,
public firstName: string,
public lastName: string) {
}
get fullName(): string {
return this.firstName + ' ' + this.lastName;
}
}
In this case, you can use the following:
在这种情况下，您可以使用以下方法：
export class AppComponent {
title = 'Get property issue';
person: Person = new Person(1, 'This', 'That');
}
