[Angular 2] *ngFor ( 综合应用 )

我会带着你远行 2022-05-14 02:14 207阅读 0赞

原文出处：[https://www.cnblogs.com/Answer1215/p/5872646.html][https_www.cnblogs.com_Answer1215_p_5872646.html]

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

注意：
        上面的trackBy(hero)方法，似乎参数有问题，永远返回的都是: undefined;
        最后参考这篇《Angular利用trackBy提升性能的方法》，“trackBy函数需要两个参数，第一个是当前项的index，第二个是当前项，并返回一个唯一的标识”。
        将trackBy(hero) 改为: trackByID(index, item) 
        html直接写 trackByID, 搞掂！

here we can also use:

trackBy: hero?.id

heroes.component.css:

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

![364241-20160914160941742-990213312.png][]

[https_www.cnblogs.com_Answer1215_p_5872646.html]: https://www.cnblogs.com/Answer1215/p/5872646.html
[364241-20160914160941742-990213312.png]: /images/20220514/919246bac59949fba0d0d88f594ce7fb.png