angular组件数据

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>