Question

我来自Angular 1，我只是这样做：

var options = {};
options.location = "test";
options.time = "today";

我只想对Angular 2做同样的事情，通过将变量添加到对象并使用插值在HTML中引用它们来“分组”我的变量

<input [(ngModel)]="options.location" />

现在我已经知道我可以做到这一点：

export class Options {
  location: string;
}

options: Options = {
  location: 'test'
};

我的问题：是否有更简单的方式

options: {location: string};

谢谢！

Answer 1

Typescript可以被视为扩展JavaScript。任何有效的JavaScript代码都是有效的Typescript代码。

您在问题中写的代码：

var options = {};
options.location = "test";
options.time = "today";

......完全合法（但不是最佳）。

问题在于，简单地声明options在组件中的行为方式不会使其从模板中看到。 options必须是Component类的公开成员。您的Component课程应该是

@Component({
  template: `
<input [(ngModel)]="options.location" />
`})
export class FormsPage {
  options = {location :"test", time : "today" }
}

请注意，如果我是你，除了Angular2之外，我还会阅读Typescript documentation（甚至是JavaScript）。它可以帮助您更好地理解如何处理它。

Answer 2

自己找到 -

this.options = {location: "test"};

而不是

this.options.location = "test"

不确定为什么第二个版本不起作用。如果您有见解，请分享评论！

Answer 3

要初始化角度为ngModel的值，请按以下步骤创建类选项：

<强> Options.ts

export class Options {
  location: string;
  time: string;
  constructor(location: string, time: string) {

  }
}

或

export class Options {
  location: string;
  time: string;
  constructor(location: string, time: string) {
    this.location = location;
    this.time = time;
  }
}

<强> HTML：

<input type="text" name="location" [(ngModel)]="options.location" #location="ngModel" required/>

<input type="text" name="time" [(ngModel)]="options.time" #time="ngModel" required/>

在组件中初始化options，如下所示：

options = new Options('','');

注意：如果您创建Options类，请执行以下操作：

   export class Options {
      constructor(location: string, time: string) {

      }
    }

它可以与ng serve配合使用，但非配合ng build --prod，因为AOT（Ahead-of-Time）编译会出错：

ERROR in ng:/xxxx/x.component.html (67,74): Property 'location' does not exist on type 'Options'.
ERROR in ng:/xxxx/x.component.html (72,72): Property 'time' does not exist on type 'Options'.

如果以这种方式初始化组件中的options

options={};

也会出现同样的错误。

Answer 4

您可以这样做：

options: Options = {
  location: 'test'
} as Options;

Answer 5

您可以选择以下选项：

Options = new Options ({ location :"test", time : "today"  });

在Angular2 / Javascript

5 个答案: