Angular2 / Typescript对象和属性绑定到模板

小尼克

注意:我想知道正确的方法或更多
_____________________________________________________________________
ANGULAR1

在中angular1,我们可以执行以下操作。

$scope.user={};
$scope.user.name="micronyks";
$scope.user.age="27";

或直接喜欢

$scope.user={name:"micronyks",age:"27"}

绑定到模板的样子,

<div>My name is {{user.name}} & I'm {{user.age}} year(s) old. </div>


______________________________________________________________________
ANGULAR2

angular2打字稿

模型

export class LoginModel()
{
  private name:string;
  private age:number;
}

应用程序

import {LoginModel} from '../models.ts';

user=new LoginModel()
constructor()
{
   this.user.name="micronyks"
   this.user.age="27"
}

app.html

<div>My name is {{user.name}} & I'm {{user.age}} year(s) old. </div>

我们可以直接创建具有值的属性的对象吗?

我知道TypeScript主要是关于type

但是想知道是否还有其他东西,以及是否有人知道某些东西。

如果您想展示一些东西,您可以使用这个塞子:Plunker

蒂埃里圣堂武士

您也可以在Angular2中使用文字对象,例如Angular1。由于Angular2可与TypeScript一起使用,因此您可以利用其强类型。这样,您可以指定属性和参数的类型。现在无法进行检查,如果使用了不正确的类型,这将导致类型错误。

import {LoginModel} from '../models.ts';

export class Test {
  user:LoginModel = new LoginModel()

  constructor() {
    this.user.name = 'micronyks';
    this.user.age = 27;

    this.someMethod(this.user);
  }

  someMethod(user:LoginModel) {
    // ...
  }
}

另一点与依赖项注入有关,因为Angular2可以依靠类型来知道要注入哪个实例...否则,您需要使用@Inject

在您的IDE中也有影响。因为如果定义类型而不是没有类型或,就可以完成any

实际上,甚至可以混合一些东西:

interface INumbersOnly {
  [key: string]: number;
}

var x: INumbersOnly = {
  num: 1, // works fine
  str: 'x' // will give a type error
};

所以我想说,您可以自由地做自己想做的事;-)

有关更多详细信息,请参见此问题:

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用选择将对象属性绑定到Angular2表单项

来自分类Dev

如何将对象属性绑定到 angular2 中的文本框

来自分类Dev

angular2 模板绑定 unicode

来自分类Dev

绑定到angular2中的组件属性

来自分类Dev

Angular2 TypeScript如何获取对象属性以显示在模板中

来自分类Dev

angular2将事件绑定到可观察对象

来自分类Dev

服务和组件属性之间的angular2数据绑定

来自分类Dev

Angular2中的输入属性绑定

来自分类Dev

Angular2绑定问题

来自分类Dev

Angular2:输入绑定

来自分类Dev

Angular2不同的模板

来自分类Dev

Angular2模板应用

来自分类Dev

Angular2动态模板

来自分类Dev

angular2 TypeScript性能

来自分类Dev

Angular2 foreach对象?

来自分类Dev

Angular2数组对象

来自分类Dev

属性未定义的Angular2和TypeScript

来自分类Dev

Angular2和Turbolinks

来自分类Dev

Angular2和NodeJ

来自分类Dev

Cloudinary和Angular2

来自分类Dev

Angular2和TypeScript导入错误

来自分类Dev

Angular2,TypeScript,如何将属性值读取/绑定到组件类(在ngOnInit中未定义)

来自分类Dev

Angular2:绑定到模板时呈现为整数的字符串值

来自分类Dev

如何将点击事件绑定到 angular2 模板插值?

来自分类Dev

Angular2属性指令将主机绑定到主机属性

来自分类Dev

选择Angular2的双向绑定

来自分类Dev

在Angular2中主机绑定ngIf

来自分类Dev

Angular2,inputmask ngModel绑定

来自分类Dev

选择Angular2的双向绑定