Angular4-基础语法

绑定数据

// ts文件中
title = "myapp";
// html文件中
{{title}}

绑定属性

<span id={{id}} title="{{title}}">查看我的id</span>

插入HTML

// ts 文件中
subTitle = "<h2>这是一个副标题<h2>";
// html文件中
<div [innerHTML]="subTitle"></div>

循环、判断

// ts 文件中
list=[
  {
    index:1,
    name:"张三"
  },
  {
    index:2,
    name:"李四"
  },
  {
    index:3,
    name:"隔壁老王"
  },
  {
    index:4,
    name:"老五"
  }];
 // html文件中
 <ul>
  <li *ngFor="let item of list;let i = index">
    <div *ngIf="i != 1">第{{i}}个数据是{{item.name}}</div>
  </li>
</ul>
// 这样会循环显示，并且隐藏了i=1的数据

键盘事件

// html 文件中
<input type="text" (keydown)="onKeyDown($event)"/>
// ts文件中
onKeyDown(e)
{
  console.log("按键:"+e.key+",code="+e.keyCode);
}

双向数据绑定

// ts文件中
import { FormsModule } from '@angular/forms';
imports: [
    FormsModule,
]
// html文件中
<input type="type" [(ngModel)]="value"/>{{value}}

List操作

this.list=
[
    {name:"张三",age=1},
];
// 增加
var obj = {name:"老王",age=2};
this.list.push(obj);
// 删除
this.list.splice(index,count);