在 Angular2/Javascript 中初始化一个变量对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42330033/
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
Initialize a variable object in Angular2 / Javascript
提问by Yorick Tran
I'm coming from Angular 1 where I'd just do this:
我来自 Angular 1，我会这样做：
var options = {};
options.location = "test";
options.time = "today";
I just want to do the same thing with Angular 2 to sorta "group" my variables by adding them to objects and using interpolation to reference them in the HTML
我只想对 Angular 2 做同样的事情，通过将变量添加到对象并使用插值在 HTML 中引用它们来对我的变量进行排序
<input [(ngModel)]="options.location" />
Now I already figured I could do this:
现在我已经想我可以这样做：
export class Options {
location: string;
}
options: Options = {
location: 'test'
};
My question: Is there a simpler way like
我的问题：有没有更简单的方法，比如
options: {location: string};
Thanks!
谢谢！
回答by C.Champagne
Typescript can be considered as extended JavaScript. Any valid JavaScript code is valid Typescript code.
Typescript 可以被认为是扩展的 JavaScript。任何有效的 JavaScript 代码都是有效的 Typescript 代码。
The code you wrote in your question :
您在问题中编写的代码：
var options = {};
options.location = "test";
options.time = "today";
...is perfectly legal (but not optimal).
...是完全合法的（但不是最佳的）。
The thing is that simply declaring optionsthe way you do in the component won't make it visible from the template. optionsmust be a publicmember of the Componentclass.
Your Componentclass should look like
问题是简单地声明options您在组件中所做的方式不会使其从模板中可见。options必须是类的公共成员Component。你的Component班级应该看起来像
@Component({
template: `
<input [(ngModel)]="options.location" />
`})
export class FormsPage {
options = {location :"test", time : "today" }
}
Note that if I were you, I would read Typescript documentation(and even JavaScript one) in addition to Angular2's one. It would help you to better understand how handle it.
请注意，如果我是你，除了 Angular2 的文档之外，我还会阅读Typescript 文档（甚至是 JavaScript文档）。它将帮助您更好地了解如何处理它。
回答by Yorick Tran
Found it myself -
自己找的——
this.options = {location: "test"};
instead of
代替
this.options.location = "test"
Not sure why the second version does not work. If you have insight please share in the comments!
不知道为什么第二个版本不起作用。如果您有见解，请在评论中分享！
回答by Ajit Soman
To initialize a ngModelvalue in angular , Create a class Optionslike this:
要ngModel在 angular 中初始化一个值，请创建一个类选项，如下所示：
Options.ts
选项.ts
export class Options {
location: string;
time: string;
constructor(location: string, time: string) {
}
}
Or
或者
export class Options {
location: string;
time: string;
constructor(location: string, time: string) {
this.location = location;
this.time = time;
}
}
HTML:
HTML：
<input type="text" name="location" [(ngModel)]="options.location" #location="ngModel" required/>
<input type="text" name="time" [(ngModel)]="options.time" #time="ngModel" required/>
And in your componentinitialize optionslike this:
在你的组件中options像这样初始化：
options = new Options('','');
NOTE: if you create Optionsclass like this:
注意：如果你创建这样的Options类：
export class Options {
constructor(location: string, time: string) {
}
}
It will work with ng servebut NOTwith ng build --prodas AOT(Ahead-of-Time) compilation gives error:
它可以使用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'.
If you initialize optionsin component in this way
如果options以这种方式在组件中初始化
options={};
will also gives same error.
也会给出同样的错误。
回答by Gustavo Cantero
You can do it this way:
你可以这样做：
options: Options = {
location: 'test'
} as Options;
回答by xu te
you can do like this options:
你可以这样做：
Options = new Options ({ location :"test", time : "today" });
