zoukankan      html  css  js  c++  java
  • 11双向数据绑定和监听用户的输入

    双向数据绑定

    方向一:将数据绑定到视图

    方向二:将视图用户操作的结果 绑定到 数据

    语法:<input   type=" "       [(ngModule)] = " ">

    ①必须指定模块 依赖于 表单模块(ngModule指令并不属于ng核心模块的,属于表单模块)

      在app.module.ts中,引入表单模块

      import {FormsModule} from '@angular/forms'

      

    ②在数据的元数据 imports 数组中指定表单模块的名字

      @NgModule({

        imports : [FormsModule]

         })

    ③使用ngModule

      <input  type="text" [(ngModule)] = "myValue3" />

      

            

    ④监听用户的输入

      

       

      监听用户输入方式一,带参数

      handleModelChange(data:any){             <input type="text"   [(ngModel)] = "myValue3"      (ngModelChange) = "handleModelChange($event)" />

        console.log(data);

        //data就是对应的修改后的数据

      }

      监听用户输入方式二,不带参数,但是双向数据绑定要求在监听用户输入处理函数之前

      handleModelChange(){         <input type="text"   [(ngModel)] = "myValue3"      (ngModelChange) = "handleModelChange()" />

        console.log("this.myValue3");

      }

      当采用方式二,而双向数据绑定在监听用户输入函数之后时,会出现 没有同时触发 监听用户处理函数 的情况

      <input type="text"    (ngModelChange) = "handleModelChange()"   [(ngModel)] = "myValue3"   />

      

      注意:监听用户输入的前提是要有双向数据绑定

  • 相关阅读:
    如何准备面试复试(1)
    如何应对糟糕的面试官(2)
    美国:经济危机让烟民吸烟量增加
    MOV 指令的注意事项
    一个简单的ajax无刷新翻页的程序
    SQL注入漏洞全接触
    php+mysql非暴力查表的注入语句写法总结
    在你的成长过程中,有五个人非常重要
    爱就在那里,不增不减
    php的一些书籍
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/12207618.html
Copyright © 2011-2022 走看看