初探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>

　　　　结果: