文本绑定

• html部分：
  <p [innerHTML]="msg"></p>可渲染html标签
  <p>{{msg}}</p>渲染文字
• ts部分：
  设置msg值msg='我<em>爱</em>中国';

图片绑定

• html部分：
  三种格式

<p>
  <img src="{{url}}" alt="">
</p>
<p>
  <img [src]="url" alt="">
</p>
<p>
  <img bind-src="url" alt="">
</p>

• ts部分：
  url = "https://www.baidu.com/img/bd_logo1.png";

标题绑定

• html部分：
  <p [title]="msg">我爱我的祖国</p>
• ts部分：
  title = 'myng'; msg='xxxx';

表单绑定

• html部分：

<p>手动双向绑定
<br>
<input type="text" [value]="msg" (input)="msg=$event.target.value">
</p>
<p>FormsModule 自动双向绑定数据
<br>
<input type="text" [(ngModel)]="msg">
</p>

• ts部分：
  只用设置msg即可

条件渲染

• html部分：

<div *ngIf="flag else blockif">我喜欢if</div>
<ng-template #blockif>我爱else</ng-template>

• ts部分：
  flag=true;
  根据flag状态不同，显示不同内容；

列表渲染

• html部分：

<ul>
  <li 
  *ngFor="let item of list;let i =index"
  (click) = "setCurrent($event,i)"
  [ngClass] ="{'active':i==current}"
  >
    {{i+1}} {{item}}
    <!-- index值   内容 -->
  </li>
</ul>

• ts部分：
  list = ['jquery','vue','react','javascript'];

事件绑定

• html部分：
  <button (click)="flag=!flag">变身</button> 控制flag的状态为true或false
  <button (click)="msg='神奇文本'">神奇文本</button> 改变msg内容为神奇文本
  <button (click)="msg=$event.target.innerHTML">事件参数</button> 改变msg内容为事件参数
  <button (click)="showMsg($event)">响应函数</button> 绑定函数，弹出事件
• ts部分：

showMsg(e){
    console.log(this.msg);
    alert(this.msg);
      }

类和样式的绑定

• html部分：

<p [class]="myclass"> 夏天来啦</p>
<p [ngClass]="{'active':flag}">春天来啦！</p>
<p [class.active]="flag"> 秋天来啦！</p>
<p [style.color]="flag?'green':'pink'">样式绑定</p>
<p [ngStyle]="mystyle"> 吃的苦中苦</p>
<p [ngStyle]="{'color':'gold','font-size':'26px'}">方为人上人</p>

• ts部分：
  myclass='active';
mystyle = {color:"blue",'font-size':'38px','font-weight':'900'};
• style部分：
  .active{color:orangered}

checkbox绑定

• html部分：
  <input type="checkbox" [(ngModel)]="sel">阅读并同意条款
<button [disabled]="!sel">登录</button>
• ts部分：
  sel =false;默认不同意

下拉选项绑定

• html部分：

<select [(ngModel)]="hobby">
  <option value="吃饭">吃饭</option>
  <option value="睡觉">睡觉</option>
  <option value="王者荣耀">王者荣耀</option>
</select>

管道--默认管道 过滤器

• html部分：

<p>时间：{{d}}</p>
<p>时间：{{d|date:'yy-MM-dd HH:mm:ss'}}</p>
<p>json:{{obj|json}}</p>
<p>数字：{{3.1415926|number:'1.2-2'}}</p>
<!-- number:'整数最小几位，.小数最小2位，最多2位' -->

• ts部分：
  d = new Date();
obj = {name:"含含",age:18,arr:[1,2,3]}}

截取管道

• html部分：

<ul>
  <li 
  *ngFor="let item of list|slice:2:4;let i =index"
  >
  <!-- |slice:2:4截取第2个-到第4个，不包含第4个 -->
    {{i+1}} {{item}}
    <!-- index值   内容 -->
  </li>
</ul>

• ts部分：
  只需设置list数组即可；