如何在Angular2中正确简单地声明一个对象

Question

我试图声明一个对象并在我的离子2应用程序中设置默认值,但我还不太了解typescript和angular2.

我这样做了:

@Component({
    selector: 'page-weightlevel'
    , templateUrl: 'weightlevel.html'
})
export class WeightlevelPage {

    name: string;
    firstNavParam: boolean;
    data = any;
    data.shareoptions: ['Facebook', 'Twitter', 'Email'];
    data.techniqueText: string;
    data.frequScaleWording: string[];
    data.fitnessWording: string[];
    data.levelName: string[];

    constructor(
        public navCtrl: NavController,
        ....

我收到此错误:

Typescript Error
';' expected.
src/pages/weightlevel/weightlevel.ts
data.shareoptions: ['Facebook', 'Twitter', 'Email'];

数据和shareoptions之间的点显然不受欢迎.

你能帮帮忙吗？

Answer 1

在Typescript中声明/初始化Object的方法是,就像名字所说的那样,键入你的数据.你可以使用any,但这只是违反了TypeScript的目的.因此,创建一个具有所需属性的模型,因此声明一个空对象将是:

data: MyType = <MyType>{};

您现在要做的是将数据分配给对象.为此,使用=

ngOnInit() {
  this.data.shareOptions = ['Facebook', 'Twitter', 'Email']
}

根据评论中的讨论,您可以自然地在组件中的Object内声明数组,如下所示:

data = <MyType>{shareOptions:['Facebook','Twitter','Email']};

但请记住,即使声明了一个类型,例如接口,它在运行时也不存在.键入仅供编译器帮助您,并在您尝试分配模型中不存在的值或属性时告诉您.因此,您实际上可以覆盖所有模型,您的应用程序将无误地运行.

但请输入您的数据并避免使用any!

Answer 2

根据我的经验，我通过以下方式创建了对象。但是当我在 Angular 5.2 中运行构建脚本时出现错误。然后我用了第二种方式。

错误的方法：

 data = {};

正确的方法：

 data:any = {};

Answer 3

首先，您需要在模型文件中创建一个新类。如果没有任何模型文件，请创建一个新的。然后创建一个具有如下属性的类。

Class Data{

 shareoptions: [];
 techniqueText: string;
 frequScaleWording: [];
 fitnessWording: [];
 levelName: [];
}

然后使用该类在组件中创建新对象

@Component({
    selector: 'page-weightlevel'
    , templateUrl: 'weightlevel.html'
})
export class WeightlevelPage {

    name: string;
    firstNavParam: boolean;


    constructor(
        public navCtrl: NavController,
     data = new Data();
    data.shareoptions = ['Facebook', 'Twitter', 'Email'];
        ....

聚苯乙烯

在:标记之后您可以指定数据类型。['Facebook', 'Twitter', 'Email'] 不是数据类型。如果需要将数据分配给数组，请使用=标记。如果您需要为数组赋值，请在构造函数内进行

 data.shareoptions = ['Facebook', 'Twitter', 'Email'];

编辑：

在:标记之后您可以指定数据类型。['Facebook', 'Twitter', 'Email'] 不是数据类型。如果需要将数据分配给数组，请使用=标记。如果您需要为数组赋值，请在构造函数内进行

@Component({
    selector: 'page-weightlevel'
    , templateUrl: 'weightlevel.html'
})
export class WeightlevelPage {

    name: string;
    firstNavParam: boolean;
    data = any;
    data.shareoptions:any;
    data.techniqueText: string;
    data.frequScaleWording: string[];
    data.fitnessWording: string[];
    data.levelName: string[];

    constructor(
        public navCtrl: NavController,
        data.shareoptions= ['Facebook', 'Twitter', 'Email'];