Angular4-基础语法

绑定数据

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

绑定属性

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

插入HTML

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

循环、判断

// ts 文件中
list=[
  {
    index:1,
    name:"张三"
  },
  {
    index:2,
    name:"李四"
  },
  {
    index:3,
    name:"隔壁老王"
  },
  {
    index:4,
    name:"老五"
  }];
 // html文件中
 

  
"let item of list;let i = index">
    <div *ngIf="i != 1">第{{i}}个数据是{{item.name}}div>
  

// 这样会循环显示，并且隐藏了i=1的数据

键盘事件

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

双向数据绑定

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

List操作

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