app.component.html
<app-news></app-news>
news.components.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.scss'] }) export class NewsComponent implements OnInit { /* 声明属性的几种方式 public 共有(默认) 可以在这个类里面使用,也可以在类外面使用 protected 保护类型 他只能在当前类和它的子类可以访问 private 私有 只有在当前类才可以访问这个属性 */ // 定义普通数据 public title = "哈哈哈哈-呵呵"; msg = "我是一个新闻组件的msg"; public username:string="张三"; // 推荐使用这种方式 public student:any="我是一个学生的属性(数据)"; public userinfo:any={ username:"张三", age:'20' } public message:any; public content="<h2>我是一个html标签</h2>"; // 定义数组 public arr=["111","222","333"]; // 推荐 public list:any[]=['我是第一个新闻','我是第二个新闻','我是第三个新闻']; public items:Array<string>=['我是第一个新闻组件','我是第二个新闻组件']; public userlist:any[]=[{ username:'张三', age:20 },{ username:'李四', age:21 },{ username:'王五', age:40 }]; public cars:any[]=[ { cate:"宝马", list:[ { title:'宝马x1', price:'30万' }, { title:'宝马x2', price:'40万' }, { title:'宝马x3', price:'50万' } ] }, { cate:'奥迪', list:[ { title:'奥迪ql', price:'40万' }, { title:'奥迪q2', price:'40万' }, { title:'奥迪q3', price:'30万' } ] } ] constructor() { this.message='这是给属性赋值--(改变属性的值)' //获取属性的值 console.log(this.msg); //改变属性的值 this.msg='我是改变后的msg的值' } ngOnInit(): void { } }
news.component.html
<app-header></app-header> <h2>我是一个新闻</h2> <h3>{{title}}</h3> <h4>{{msg}}</h4> <h5>{{username}}</h5> <h6>{{student}}</h6> <h6>{{userinfo.age}}</h6> <div> {{message}} </div> <hr /> <h1>angular模板里面绑定属性</h1> <div title="我是一个div"> 鼠标瞄上去看一下 </div> <div [title]='student'> 张三 </div> <hr /> <h1>angular模板里面绑定html</h1> <div> {{content}} </div> <br> <span [innerHTML]='content' class='red'></span> <hr /> <h1>angualr模板里面允许做简单的运算</h1> 1+2={{1+2}} <hr /> <h1>angualr里面的数据循环</h1> <ul> <li *ngFor="let item of arr"> {{item}} </li> </ul> <br> <ol> <li *ngFor="let item of list"> {{item}} </li> </ol> <br> <ul> <li *ngFor="let item of userlist"> {{item.username}}---{{item.age}} </li> </ul> <br> <ul> <li *ngFor="let item of cars"> <h2>{{item.cate}}</h2> <ol> <li *ngFor='let car of item.list'> {{car.title}}---{{car.price}} </li> </ol> </li> </ul>