自定义设置属性值

<div [id]='myName'>{{myName}}
</div>
<div id={{myName}}>{{myName}}
</div>
<div bind-id='myName'>{{myName}}
</div>
<div [attr.myname]='myName'>{{myName}}
</div>

模板绑定是通过 property 和事件来工作的，而不是 attribute。

ngClass

<div [ngClass]="{'special': isSpecial}"></div>

*ngIf用法

<tr *ngIf="isAdd"></tr>

*ngFor循环

<tr *ngFor="let item of tableArr;let key=index;"><td>{{item.formid}}</td><td>{{item.datasetid}}</td><td>{{item.len}}</td><td>{{item.entertime}}</td><td>{{item.savetypeName}}</td><td>{{item.version}}</td><td><button (click)="delItem(key)">删除</button></td>
</tr>

input双向绑定

/*** 告诉angular 如何组装应用*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { HttpClientModule }   from '@angular/common/http';import { AppComponent } from './app.component';//@NgModule 装饰器将AppModule标记为Angular 模块类（也叫做 NgModule类）
// @NgModule 接收一个元数据对象，告诉Angular 如何编译和启动应用
@NgModule({// 引入当前项目运行的组件，自定义组件都需要引入并且在这里声明// 依赖注入declarations: [AppComponent],// 当前项目依赖哪些模块imports: [BrowserModule,HttpClientModule,// 如果要引入双向绑定，则需要引入FormModuleFormsModule,AppRoutingModule],// 定义服务providers: [StorageService],// 默认启动哪个组件bootstrap: [AppComponent]
})// 根模块不需要导出任何东西，因为其他组件不需要导入根模块，但是一定要写
export class AppModule { }

需要引入 import { FormsModule } from '@angular/forms';

<input type="text" [(ngModel)]="username">

定义事件

<button (click)="addRowData()">添加</button>

定义事件是在 Component中定义一个方法

import { Component, OnInit } from '@angular/core';
import { Config } from '../config';@Component({selector: 'app-dingml',templateUrl: './dingml.component.html',styleUrls: ['./dingml.component.scss']
})
export class DingmlComponent implements OnInit {public tableArr: any = [];public formid: string = '';public datasetid: string = '';public len: string = '';public savetype: string = '1';public version: boolean = false;public entertime: number = new Date().getTime();public isAdd: boolean = false;constructor() {}addRowData () {this.isAdd = true;this.formid = "";this.datasetid = "";this.len = "";this.savetype = "1";this.version = false;this.entertime = new Date().getTime();}// 添加一行数据saveItem() {const that = this;var newItem = {savetype: that.savetype,savetypeName: that.savetype==="1"?"全匹配更新":"按主键更新",formid: that.formid,datasetid: that.datasetid,len: that.len,version: that.version,entertime: that.entertime};this.isAdd = false;this.tableArr.push(newItem);}cancelAdd() {this.isAdd = false;}// 删除数据delItem (index) {this.tableArr.splice(index, 1);}ngOnInit() {}}