zoukankan      html  css  js  c++  java
  • [Angular 2] *ngFor

    heros.ts:

    import {Component} from "@angular/core";
    
    const HEROES = [
        {id: 1, name:'Superman'},
        {id: 2, name:'Batman'},
        {id: 5, name:'BatGirl'},
        {id: 3, name:'Robin'},
        {id: 4, name:'Flash'}
    ];
    
    @Component({
        selector:'heroes',
        styleUrls: [
            'heroes.component.css'
        ],
        template: `
        <table>
            <thead>
                <th>Name</th>
                <th>Index</th>
            </thead>
            <tbody>
                <tr *ngFor="let hero of heroes; let i = index; trackBy: trackBy(hero);
                 let isEven=even; let isFirst=first; let isLast=last;"
                 [ngClass]="{'even': isEven, 'first': isFirst, 'last': isLast}">
                    <td>{{hero.name}}</td>
                    <td>{{i}}</td>
                </tr>
            </tbody>
        </table>
    `
    })
    export class Heroes {
        heroes = HEROES;
    
        trackBy(hero){
            return hero ? hero.id: undefined;
        }
    }

    here we can also use:

    trackBy: hero?.id

    heroes.component.css:

    .even{
        background: lightgray;
    }
    
    .first{
        font-weight: bold;
    }
    
    .last{
        color: white;
        background: black;
    }

  • 相关阅读:
    感谢梦想
    感谢迷茫
    CSS动画
    ES6笔记③
    Object的增。删。查。改。遍历
    js创建对象的方式 三种
    js 控制台的错误提示
    ES6笔记② 箭头函数
    ES6笔记① var 和 let的区别
    js冒泡排序
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5872646.html
Copyright © 2011-2022 走看看