场景

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中声明属性

public title = "霸道流氓气质"

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

{{title}}

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

1+1={{1+1}}

绑定Html

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

在ts中声明属性

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

在html中通过[]绑定属性

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

绑定属性

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

声明两个属性

  public id = "123"public msg = "这是一个title"

然后在html中

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

双向数据绑定

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

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

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

并且在imports中添加

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

public inputValue ="默认值"

然后在html中

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

查看效果

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

Angular中数据循环ngFor、条件判断ngIf、ngSwitch、执行事件(click)、表单事件(keyup)、ngClass、ngStyle的使用
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
angular中的e2e检测sendkeys将绑定值设置为空
<button id="publish" [disabled]="((!testContent)&&iValue)" >发表< ...
vue radio双向绑定_Vue是如何实现双向数据绑定的
现在圈子中许多JS框架都有自己的数据相应引擎.通过了解其工作原理,我们可以在实际开发中更有效地使用它.在下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity. TheReac ...
EngJS(超轻量) 中数据双向绑定如何使用
Eng github 所有支持数据双向绑定的js工具 ,触发双向关系的基本方式无外乎 wather关系和事件关系两种 . 前者操作数据时 ,后者触发事件时. 下面简单的介绍Eng 中的 w ...
js 取得input绑定的datalist中的值_javascript基础修炼(9)——MVVM中双向数据绑定的基本原理...
[小宅按] 开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Pag ...
Vue中从v-model，model，.sync到双向数据传递，再到双向数据绑定
前面的话虽然v-model和.sync之间的区别,是非常明显的,但是通过这个去研究下去,就有点意思了.首先说明v-model是.sync的一种特殊情况,也就是当prop是value,vm.$emit ...
Angular中优雅的处理RxJs自动取消订阅的方式以免出现内存泄露以及多次调用的问题
Angular中深度集成了Rxjs,只要你使用Angular框架,你就不可避免的会接触到RxJs相关的知识. 在Android开发中,绝大多数的Android开发者都用过RxJava.RxAndroi ...
JavaScript实现简单的双向数据绑定（Ember、Angular、Vue）
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و [本文源址:http://blog.csdn.net/q1056843325/article/details/72999948 ...
angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例...
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){this.state{msg:"双向数据绑定" ...

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

场景

实现

数据文本绑定

绑定Html

绑定属性

双向数据绑定

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

最新文章

热门文章