angular组件数据

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';

  private username:string='张三';

  //推荐
  public student:any='我是一个学生的属性（数据）';

  
  public userinfo:object={

      username:"张三",
      age:'20'
  }


  public message:any;
 

  public content="<h2>我是一个html标签</h2>";




  //定义数组

  public arr=['1111','2222','33333'];

  //推荐
  public list:any[]=['我是第一个新闻',222222222222,'我是第三个新闻'];

  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:'30万'
          },
          {

            title:'宝马x3',
            price:'40万'
          }
        ]
      },
      {

        cate:"奥迪",
        list:[
          {

            title:'奥迪q1',
            price:'40万'
          },
          {

            title:'奥迪q2',
            price:'40万'
          },
          {

            title:'奥迪q3',
            price:'30万'
          }
        ]
      }
  ]
  constructor() { 
    this.message='这是给属性赋值--（改变属性的值）';
    //获取属性的值
    console.log(this.msg);   
    //改变属性的值
    this.msg="我是改变后的msg的值";
  }
  ngOnInit() {
  }

}

html

<h1>angualr模板里面绑定数据</h1>
          <h2>{{title}}</h2>

          <h3>{{msg}}</h3>


          <h4>{{username}}</h4>


          <h5>{{student}}</h5>



          <hr />

          <h6>{{userinfo.username}}</h6>


          <div>

            {{message}}
          </div>

<hr />
<h1>angualr模板里面绑定属性</h1>
        <div title="我是一个div">
          鼠标瞄上去看一下
        </div>
        <br>

        <div [title]="student">
          张三
        </div>
<hr />
<h1>angualr模板里面绑定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>  


    <ol>

      <li *ngFor="let item of items">

        {{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>
  <br>  
  <br>
  <br>
  <br>

      

css

.red{

    color: red;
}