• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > angular开发 > angular6.0使用教程:angular数据绑定

    angular6.0使用教程:angular数据绑定

    作者: 分类:angular开发 点击: 425 次
    wordpress CMS主题:ssmay主题

      我们创建好了home组件后,要想让它的内容在前台页面显示,我们需要在主组件app.component.html文件中引入它。打开app.component.html文件,把里面的原始代码删除,添加上<app-home></app-home>,这时前台页面就会把home组件上的内容显示出来。我们可能会有很多后台的数据要在这个页面显示,这时,angular6.0提供了数据绑定,我们只需要把后台数据在home组件上绑定,就可以在前台显示。

       

      1、单向数据绑定:

      所谓单向数据绑定,就是说前台只能获取到后台的数据,而不能影响到后台的数据。

      我们在home.component.ts上添加一个属性:

      hero = 'wanlimm.com';

      然后,我们在前台代码中调用,即在home.component.html文件中调用 这个hero属性:

      {{ hero }}

      这样,我们就可以在页面中看到“ wanlimm.com”这几个字符。

      2、双向数据绑定:

      所谓双向数据绑定,就是说前台可以从后台获取数据,也可以影响后台的数据。这里,我们以表单输入来作为示例。我们要实现的是:也就是表单输入框中没输入内容是默认内容,如果有输入,就显示输入的内容。

      首先,在app.module.ts文件中导入表单模块:

      angular6.0使用教程:angular数据绑定

      然后,在home.component.ts文件中添加 一个属性:

      inputValue="请输入...";

      再在home.component.html文件中添加表单元素:

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

      这样,在前台页面的这个输入框输入内容,就会修改inputValue的值。这就实现了,inputValue值影响input的值,input值也影响inputValue的值。

       

       

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201806045631.html
    本文时间:2018-06-04 15:26:57
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.