Angular 插值绑定

前言

一直在做项目没有来的及做总结，有时间不管用，也有不想去总结，因为总感觉有的地方欠缺所以懒着不去总结，发现错失了很多东西，这次分析插值绑定的基础知识，希望帮助到大家

---

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>

界面实现

总结

不断完善，不断分享！