[Angular 2] 4. Rc7:more on *ngfor, @ContentChildren & querylist<>

In previous artical, we introduce the and use *ngfor. The limitation for previous solution to display all the heros are we hard cord all heros in our heroes component.  First, in the real world app, we cannot hard cord; Seond, even we don ' t hard code, do HTTP instead, it's 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 The "like" this:

@Component ({selector: ' app ', Template: '<Heroes>                <Heroname= "Superman"ID= "1"></Hero>                <Heroname= "Batman"ID= "2"></Hero>                <Heroname= "Batgirl"ID= "3"></Hero>                <Heroname= "Robin"ID= "4"></Hero>                <Heroname= "Flash"ID= "5"></Hero>                <Heroname= "Zhentian"ID= "6"></Hero>            </Heroes>        `})

Well, I know, still hard code, but the 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 had commented out of 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 ({    ' hero ',}) export class Hero {    @Input ( )    Id:number;    @Input ()    name:string;    }

@ContentChildren would check the children in HTML DOM tree, which'll get:

                <Heroname= "Superman"ID= "1"></Hero>                <Heroname= "Batman"ID= "2"></Hero>                <Heroname= "Batgirl"ID= "3"></Hero>                <Heroname= "Robin"ID= "4"></Hero>                <Heroname= "Flash"ID= "5"></Hero>                <Heroname= "Zhentian"ID= "6"></Hero>

Querylist

Querylist is a class provided by Angular and if we use Querylist with a contentchildren Angular populate this with the C Omponents 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 the now.

What's cool about *ngfor, it's not the only accpets Array, but the also any iterable type, we have List of DOM element ' hero ', which Is iterable, so ngfor would able to display those also.

[Angular 2] 4. Rc7:more on *ngfor, @ContentChildren & querylist<>