Angular 插值绑定
来源:互联网 发布:arena软件 编辑:程序博客网 时间:2024/05/16 14:08
前言
一直在做项目没有来的及做总结,有时间不管用,也有不想去总结,因为总感觉有的地方欠缺所以懒着不去总结,发现错失了很多东西,这次分析插值绑定的基础知识,希望帮助到大家
What绑定
对于angular的一些基本情况我在前几篇博客中介绍过所以这次直接引入正题,angular的绑定是指模板和ts的中的数据进行绑定,如何实现那?通过ts中的代码实现,下面的代码是在ts中书写的,通过component中我们直接可以访问我们的css与html
@component({ selector:'my-app', templateUrl:'./app.component.html', styleUrls:['./app.component.css']})
What插值
其实对于angular来说有3大类型的绑定,我这次讲的插值绑定,所谓插值绑定的意思是我想让一个页面在某个部位显示具体的信息那我就把这个值插到一个固定的位置就可以~就像插花一样,插值实现的代码是“{{}}”当在html中发现这个则表示插值绑定
例如:
<h1>{{title}}</h1>
插值绑定如何实现交互
实现交互肯定少不了两个页面一个ts页面和html页面,首先跟大家介绍一个最简单的插值绑定
在html中我们写上 <h1>{{title}}</h1>
在ts中我们在类中写上 title = 'Tour of Heroes';
这样就可以实现插值绑定了,是不是很简单啊,我们直接声明一个title进行赋值 ,然后插值便显示在网页上
上面的那一种方式是最简单,如果我们有多个值需要插入那么肯定不可以使用上一种方式就行,其实前端和后端是一样,后端的数组与前端的数组是一个概念,我们可以在前端进行声明使用
声明数组方式
const HEROS: Hero[] = [ { id: 11, name: 'wang' }, { id: 12, name: 'xue' }, { id: 13, name: 'fen' }, { id: 14, name: 'da' }, { id: 15, name: 'mei' }, { id: 16, name: '女' },];
heroes = HEROS;//创建一个公共的属性(用于暴露这些英雄)
html中的书写:因为我们使用的是数组,所以在html页面我必须使用循环进行插值绑定实现。如何实现循环机制“ *ngFor” 是一个重要的机制,它是实现让数组循环进行插值绑定,
<li *ngFor="let hero of heroes"> //把heroes名字用hero代替
具体代码实现
<li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span>{{hero.name}} </li>
界面实现
总结
不断完善,不断分享!
- Angular 插值绑定
- angular 绑定动态变量
- angular数据绑定
- angular 双向绑定原理
- angular的数据绑定
- angular-数据双向绑定
- Angular双向数据绑定
- Angular双向数据绑定
- angular 倒序绑定数据
- Angular双向数据绑定
- angular(一)数据绑定
- Angular 数据绑定
- Angular数据绑定
- Angular 背景图片样式绑定
- angular 绑定html
- 【Angular-数据绑定】
- Angular 绑定语法简介
- 颜值安全都在线,施耐德电气 Angular 智意系列排插体验
- 2017.11.12第十一周周总结
- 成员变量和类变量的区别
- 二叉搜索树的结构(30 分)
- WiFiAdmin(WiFi管理工具类)
- HDOJ 1407 测试你是否和LTC水平一样高
- Angular 插值绑定
- jdbc连接数据库time_zone问题
- C语言局部变量
- css盒子模型
- [IDDFS] HDU 1560
- 设计模式-6大设计原则
- 从PHP中的文件内容获取完全限定的类名
- Windows下安装Python和pip终极教程
- (二)心累