我来自 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};
谢谢！
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 文档(甚至是 JavaScript 文档)。它将帮助您更好地了解如何处理它。
自己找到了——
this.options = {location: "test"};
而不是
this.options.location = "test"
不知道为什么第二个版本不起作用。如果您有见解，请在评论中分享！
要在angular中初始化一个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(提前时间)编译会出错：
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={};
也会给出同样的错误。
你可以这样做：
options: Options = {
location: 'test'
} as Options;
你可以像这个选项一样做：
Options = new Options ({ location :"test", time : "today" });