zoukankan      html  css  js  c++  java
  • angular中的组件以及组件中的模板合成

    html

    <h1>angular模板里面绑定数据</h1>
    <h1>{{msg}}</h1>
    <h2>{{username}}</h2>
    <h3>{{student}}</h3>
    <h4>{{title}}</h4>
    <h5>{{userinfo.username}}</h5>
    <h6>{{message}}</h6>
    <!-- <app-header></app-header> -->
    <h1>angular模板里面绑定属性</h1>
    <div title="我是一个div">
    鼠标放上去
    </div>
    <div [title]="student">
    张三
    </div>
    
    <h1>angular绑定html标签</h1>
    <div>
        {{content}}
    </div>
    <span [innerHTML]="content"></span>
    
    <h1>angular循环数组:</h1>
    <ol>
        <li *ngFor="let item of arr">
            {{item}}
        </li>
    </ol>
    <ul>
        <li *ngFor="let item of list">
            {{item}}
        </li>
    </ul>
    
    <ul>
        <li *ngFor="let item of userList">
            <h2>{{item.username}}</h2>
            <h4>{{item.age}}</h4>
        </li>
    </ul>

    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 title="我是一个新闻组件";
      msg="我是一个新闻组件的msg";
      username:string="张三";
      public student:any="我是一个学生的属性(数据)";
      public userinfo:object={
        username:"张三007",
        age:'20'
      };
      public message:any;
      public content="<h2>我是一个html标签</h2>";
      constructor() {
        this.message="这是给属性赋的值";
      }
      //定义数组:
      public arr=['111','222','3333'];
      public list:any[]=["我是第一个新闻",2222222222,"我是第三个新闻"];
    
      //数组对象:
      public userList:any[]=[
        {
          username:"张三",
          age:20
        },{
          username:"李四",
          age:20
        }
      ];
      ngOnInit() {
      }
    
    }
  • 相关阅读:
    Leetcode Plus One
    Leetcode Swap Nodes in Pairs
    Leetcode Remove Nth Node From End of List
    leetcode Remove Duplicates from Sorted Array
    leetcode Remove Element
    leetcode Container With Most Water
    leetcode String to Integer (atoi)
    leetcode Palindrome Number
    leetcode Roman to Integer
    leetcode ZigZag Conversion
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/12098500.html
Copyright © 2011-2022 走看看