Angular中数据文本绑定、绑定Html、绑定属性、双向数据绑定的实现方式

系统管理员 2023-10-07 13:31 112阅读 0赞

场景

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建组件以及组件之间的调用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通过以上搭建起Angular项目后，怎样进行数据的绑定。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

数据文本绑定

使用{ {}}

首先在news.component.ts中声明属性

  1. public title = "霸道流氓气质"

然后在news.component.html中绑定属性

  1. {
  2.    {title}}

也可以直接在html中使用其进行简单的数据计算

  1. 1+1={
  2.    {1+1}}

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70

绑定Html

可以使用绑定属性的方式，给div绑定innerHTML属性来实现

在ts中声明属性

  1. public ht = "<h2>这是一个h2，使用innerHTML来绑定</h2>"

在html中通过[]绑定属性

  1. <div [innerHTML]="ht"></div>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1

绑定属性

上面可知使用[]来绑定某元素的属性，比如

声明两个属性

  1.   public id = "123"
  2.   public msg = "这是一个title"

然后在html中

  1. <div [id]="id" [title]="msg">绑定属性使用[]</div>

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2

双向数据绑定

使用双向数据绑定需要在项目中引入FormModule

打开项目的根模块app.module.ts

  1. import { FormsModule } from '@angular/forms';

并且在imports中添加

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3

然后回到需要双向数据绑定的模块的ts中，添加一个属性

  1. public inputValue ="默认值"

然后在html中

  1. <input type ="text" [(ngModel)]="inputValue"/>
  2. {
  3.    {inputValue}}

查看效果

20200424094852315.gif

发表评论

表情：
评论列表 （有 0 条评论，112人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Angular--数据绑定

    前言 Angular学习的时候，在数据与数据之间的处理联系是非常重要的，而且处理数据之间的逻辑不是很清楚明白的话，很容易弄混，所以这篇博客总结一下数据与数据之间的关系，简

    淩亂°似流年淩亂°似流年/ 0 赞/ 489 阅读