初探Angular_03 组件中模板数据绑定

这里将介绍三种情况的数据绑定

需要TypeScript的基本知识，如TS数据类型

一、模板属性绑定数据

　　1.模板属性其实HTML的属性,如class,style,title等

　　2.先在header.component.ts中设定一个title的属性

　　

　　3.在模板页header.component.html中绑定div属性title　　

<div [title]='title'>
  设置div的title属性
</div>

　　　　可以看到,绑定属性的方式是使用中括号[]选择属性名,=号后面写在组件中定义的字段名: [属性名称]='绑定的字段名称'

　　4.结果可以看到生成的html中div有title字段

　　

二、模板输出HTML

　　如果输出的数据是HTML，那么不能直接使用{{字段}}输出,这会直接输出HTML的文本，包括标签。

　　1.定义一段HTML文本

　　　　

　　2.直接输出

<div [title]='title'>
  设置div的title属性
</div>
<div>
  <p>直接输出将会是原文输出</p>
  {{htmlcontent}}
</div>

　　　　结果

　　　　　　

　　　可见，无法直接输出HTML。

　　　3.正确输出姿势 使用 [innerHTML] = 'htmlcontent' 的方式输出，意思是内部HTML等于这个　　　

<div [title]='title'>
  设置div的title属性
</div>
<div>
  <p>直接输出将会是原文输出</p>
  {{htmlcontent}}
</div>
<br/>
<div [innerHTML] = 'htmlcontent'></div>

　　结果

　　　　

 

三、数组绑定(JSON)

　　1.输出json数组，先定义json数组personlist

import { Component, OnInit } from '@angular/core';
@Component({   selector: 'app-header',  // 这个是转换为标签组件名称   templateUrl: './header.component.html',   styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit {
  constructor() { }   // 定义字段   public title = '这里是头部页';   // 定义html文本   public htmlcontent = '<h2><em>测试输出HTML文本</em></h2>';   public personlist: any[] = [     {       id: 1,       name: 'a1',       propertys:         [           {             age: 20,             gender: '男'           }]     }, {       id: 2,       name: 'a2',       propertys: [         {           age: 20,           gender: '女'         }]     }   ];   ngOnInit() {   } }

　　2.修改组件模板

　　

<div [title]='title'>
  设置div的title属性
</div>
<div>
  <p>直接输出将会是原文输出</p>
  {{htmlcontent}}
</div>
<br/>
<div [innerHTML] = 'htmlcontent'></div>
<br/>
<div title="这里将输出json数组">
  <ul>
    <li *ngFor="let person of personlist">
      ID:{{person.id}}
      姓名:{{person.name}}
      <br/>
      <ul>
        <li *ngFor="let item of person.propertys">
          性别:{{item.gender}}
          年龄:{{item.age}}
        </li>
      </ul>
    </li>
  </ul>
</div>

　　　　结果: