（5）双向数据绑定  [(ngModel )] 

        方向1：Model => View ，模型改变视图，用[]绑定

        方向2：View => Model ，视图改变模型，用（）绑定

所以 ngModel 使用  [ (ngModel) ]

注意：想要使用 ngModel 指令，必须在主模块 app.module.ts 文件中 导入 FormsModule 模块哦

import { FormsModule} from "@angular/forms"
// 模块
@NgModule({
  // 声明注册组件
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    // 浏览器模块，只有用于web ，就要导入这个模块；包含了 common 模块
    BrowserModule,
    // FormsModule 模块导入
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

TIPS: 监听 model 改变事件 （ngModelChange）= "  modelChange（） " 

        这里得回调函数，比如可以用在搜索框中发送ajax请求；当用户输入时，发送请求，请求数据

<input [(ngModel)]="usename" type="text" placeholder="请输入用户名" (ngModelChange)="usenameChange()">

六、Angular 核心概念：过滤器（管道 Pipe）

Filter:过滤器，本质是一个函数，用来处理数据，再以新得格式进行输出

创建管道对象得简便工具：ng g pipe 管道名

1.自定义管道得步骤：

（1）创建管道 class 类，实现转换功能 ，在 xxx.pipe.ts 文件中创建管道

说明：管道得 transform 方法除了val 形参，还可以接收其他得参数，调用管道时用冒号为这些参数赋值，例如 ：{{ e.empSex | sex:'en' }}

import { Pipe } from "@angular/core";
// 管道 Pipe 装饰器 
@Pipe({
  name:'sex'
})
export class SexPipe {
  // 管道到执行过滤任务得是一个固定得函数
  // 相当于 filter 过滤器
  transform(val:number) {
    if (val == 1) {
      return '男'
    } else if (val == 0) {
      return '女'
    } else {
      return '未知'
    }
  }
}

（2）在模块中注册管道，app.module.ts 文件中注册管道

import { SexPipe } from './sex.pipe';
// 模块
@NgModule({
  // 声明注册组件
  declarations: [
  // 注册管道
    SexPipe
  ],
  imports: [
    // 浏览器模块，只有用于web ，就要导入这个模块；包含了 common 模块
    BrowserModule,
    // FormsModule 模块导入
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

（3）使用管道，在 模板文件 .html 文件中使用管道

<table>
  <thead>
    <tr>
      <th>IDth>
      <th>姓名th>
      <th>工资th>
      <th>性别th>
      <th>年龄th>
    tr>
  thead>
  <tbody>
    <tr *ngFor="let item of employList">
      <td>{{ item.id }}td>
      <td>{{ item.name }}td>
      <td>{{ item.salay }}td>   
        // 这里直接使用 管道得name:'sex' ，来自自动处理数据
      <td>{{ item.sex | sex }}td>
      <td>{{ item.age }}td>
    tr>
  tbody>
table>

2.Angular 中得预定义得管道

（1） lowercase ：转换为小写，{{ uname | lowercase }}

（2）uppercase ：转换为大写，{{ uname | uppercase }}

（3）titlecase ：转换为首字母大写 ，{{ uname | titlecase }}

（4）slice ：字符串截取，{{ ename | slice：start [ ：end ] }}  start 为截取开始得下标，end为截取结束得下标

（5）json ：把JS对象转化为JSON 字符串，{{ obj | json }}

（6）number：对数字进行处理，转为指定得整数和小数 位数，

{{ num | number }}  {{ num | number :'4.2-2' }} 4表示整数位数至少是4位（不够4位自动补0），点2表示小数位最少为2位，-2表示，小数位最多有2位；

（7）currency ：把数字转换位货币格式字符串：{{ slary | currency:'￥' }}

（8）date ：日期转换管道，转换时间戳字符串指定格式得日期：{{ str | date:'yyyy-MM-dd HH:mm:ss' }}

七、Angular核心概念：服务和依赖注入

简化工具：ng g service 服务名

1.创建对象得两种方式

        ==> 方式1：手动创建式     let obj = new Car()

        ==> 方式2：依赖注入式     不需要自己new，只需要声明依赖；服务提供者就会创建被依赖得对象，注入给声明依赖者

2.创建服务对象得步骤：

1）创建服务对象并指定服务提供者，在log.service.ts文件中创建服务对象，并导出

import { Injectable } from "@angular/core";
// 装饰器
// 所以得服务对象都是被注入得
@Injectable({
  // 指定当前服务对象在 "根模块"中提供 --AppModule
  providedIn:'root'
})
export class LogService{
  doLog(action:string) {
    let uname = 'admin'
    let time = new Date().valueOf()
    // let action = '添加了新得商品：xxx'
    console.log(`管理员：${uname}时间：${time}动作：${action}`);
  }
}

2）在组件中声明依赖，服务提供者就会自动注入，组件直接使用服务对象即可；

在构造器得形参中设置log得类型=服务名，可以直接获取依赖服务对象得方法函数，并赋值给变量，给后续函数来调用；

import { LogService } from "../log.service";
@Component({
  templateUrl: './mycom03.component.html',
  selector: 'mycom03',
  styleUrls:['./mycom03.component.css']
})
export class MyCom03Component implements OnInit{
   // 构造器
  log:LogService
  constructor(log: LogService) {
    console.log('log',log);
    this.log = log
  } 
  addShop() {
    console.log('正在添加商品');
    let action = '添加了新得商品：xxx'
    this.log.doLog(action)
  }
  deleteShop() {
    console.log('正在删除商品');
    let action = '删除了商品：xxx'
    this.log.doLog(action)
  }
}

八、Angular 官方提供得请求服务对象：HttpClient Service

HttpClient Service 服务对象用于向指定得URL发起异步请求，使用步骤：

1）在主模块中导入HttpClient 服务所在得模块

        在 app.module.ts中 import 导入HttpClientModule 模块；