(精华2020年6月4日更新)Angular基础篇 属性绑定[]的使用

ts文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.less']
})
export class NewsComponent implements OnInit {
  //定义普通数据
  title:string='我是新闻组件'
  message:any='我是信息'
  public userinfo:any = {
    username:'alice',
    age:20
  }
  public content='
我是html标签
'

  //定义数组
  public list:any[] = ['苹果',11,'香蕉']
  constructor() { }

  ngOnInit(): void {
  }

}

html文件

<div>
  <h1>-------------angualr模板里面绑定数据----------</h1>
  <div class="title"> {{title}}</div>
  {{userinfo.username}}
  {{message}}

  <h1>-------------angualr模板里面绑定属性----------</h1>
  <div title="提示">测试</div>
  <div [title]="title">
    属性
  </div>

  <div [title]="title">
    {{message}}
  </div>
  <h1>--------------------双向数据绑定--------------</h1>

   <input type="text" [(ngModel)]='keyword'>
   {{keyword}}

   <button (click)="changeKeyword($event)">改变keyword的值</button>

  <h1>---------------angualr模板里面绑定Html-------------</h1>
  <span [innerHTML]='content'></span>

  <h1>angualr模板里面做简单运算</h1>
  1+2={{1+2}}
  <br />
</div>