zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    微信小程序 单选按钮 最佳
    微信小程序 单选按钮的实现
    微信小程序 单选框实现
    Java Code To Create Pyramid and Pattern
    Java language
    npm Err! Unexpected end of JSON input while parsing near
    Node.js Express FrameWork Tutorial
    Higher-Order Function Examples
    Create First HTTP Web Server in Node.js: Complete Tutorial
    Node.js NPM Tutorial: Create, Publish, Extend & Manage
  • 原文地址:https://www.cnblogs.com/loaderman/p/10882453.html
Copyright © 2011-2022 走看看