zoukankan      html  css  js  c++  java
  • [Angular 2] More on *ngFor, @ContentChildren & QueryList<>

    In previous artical, we introduce the how to use *ngFor. The limitation for previous solution to display all the heros is we hard cord all heros in our heroes component. First, in real world app, we cannot hard cord;  Seond, even we don't hard code, do http instead, it is still not good enough. We should leave Heroes component as dump component, just rendering the ui, no logic should be involved. 

    So instead of doing this in app.ts:

    @Component({ 
        selector: 'app',
        template: `
                <heroes>
                </heroes>
            `
    })

    We try another way like this:

    @Component({ 
        selector: 'app',
        template: `
    
                <heroes>
                    <hero name="Superman" id="1"></hero>
                    <hero name="Batman" id="2"></hero>
                    <hero name="BatGirl" id="3"></hero>
                    <hero name="Robin" id="4"></hero>
                    <hero name="Flash" id="5"></hero>
                    <hero name="Zhentian" id="6"></hero>
                </heroes>
    
            `
    })

    Well, I know, still hard code, but just show how ngFor can be used.

    Now, inside 'heroes' tag, we add now 'hero' tag. And we want to display those inside 'heroes' component:

    import {Component, ContentChildren, QueryList} from "@angular/core";
    import {Hero} from './hero';
    /*
    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;
        @ContentChildren(Hero)
        heroes: QueryList<Hero>
    
        trackBy(hero){
            return hero ? hero.id: undefined;
        }
    }

    You can see, we have commented out the hard code array. Instead, we use:

        @ContentChildren(Hero)
        heroes: QueryList<Hero>

    'Hero' here, is a element directive:

    import {Directive, Input} from "@angular/core";
    
    
    @Directive({
        selector: 'hero',
    })
    export class Hero {
    
        @Input()
        id: number;
    
        @Input()
        name:string;
        
    }

    @ContentChildren will check the Children in HTML DOM tree, which will get:

                    <hero name="Superman" id="1"></hero>
                    <hero name="Batman" id="2"></hero>
                    <hero name="BatGirl" id="3"></hero>
                    <hero name="Robin" id="4"></hero>
                    <hero name="Flash" id="5"></hero>
                    <hero name="Zhentian" id="6"></hero>

    QueryList<Hero>: Only get 'Hero' directive.

    QueryList is a class provided by Angular and when we use QueryList with a ContentChildren Angular populate this with the components that match the query and then keeps the items up to date if the state of the application changes .

    However, QueryList requires a ContentChildren to populate it, so let’s take a look at that now. 

    What's cool about *ngFor, it not only accpets Array, but also any iterable type, we have list of DOM element 'hero', which are iterable, so ngFor will able to display those also.

  • 相关阅读:
    程序员的双11:3723亿,你贡献了几分力?
    程序员国企1周上班5小时?国企VS私企,应该如何选择?
    C++没有"垃圾回收"功能?智能指针,实现C++的内存管理
    【C++学习笔记】什么是C++STL?掌握C++ STL的核心很重要!
    都要2021年了,现代C++有什么值得我们学习的?
    解析:C++如何实现简单的学生管理系统(源码分享)
    程序员过高工资导致加班?应该降低程序员工资?网友:放过其他苦逼的程序员吧
    结对-结对编程项目作业名称-需求分析
    使用对话框模板创建一个InputBox()在C + +
    选择图标
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5873936.html
Copyright © 2011-2022 走看看