Angular2 ngFor, 的用法
https://toddmotto.com/angular-ngfor-template-element#lttemplategt-element
Angular ngFor, and the compiler
Angular ngFor is a built-in Directive that allows us to iterate over a collection. This collection is typically an array, however can be “array-like”. To demonstrate this, we’ll be usingRx.Observable.of() to initialise our collection with an Observable instead of a static array.
We’ll also be exploring some other under-the-hood properties of ngFor, as well as looking at how Angular expands our ngFor to a element and composes our view.
Table of contents
- Using the ngFor directive
- NgModule import
- Iterating collections
- Using ngFor
- Using trackBy for keys
- Capturing “index” and “count”
- Accessing first, last, odd, even
- element
- and Web Components
- ngFor and
- ngFor and embedded view templates
- Context and passing variables
Using the ngFor directive
In this section, we’ll be taking a look at the featureset ngFor provides, as well as some use case examples.
NgModule import
First of all, to use ngFor, you need to import theCommonModule. However, if you’re using theBrowserModule in the root module, you won’t need to import it, as theBrowserModule exposes the CommonModule for us - so you only need to import the CommonModule when creating further modules with @NgModule.
Our @NgModule will look like this:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {}
For this article, we’ll be including a further ContactCardComponent component in our @NgModule:
// ...
import { ContactCardComponent } from './contact-card.component';
@NgModule({
declarations: [
AppComponent,
ContactCardComponent
],
// ...
})
export class AppModule {}
Our ContactCardComponent simply looks like this, taking a single@Input of contact:
import { Component, Input } from '@angular/core';
import { Contact } from './models/contact.interface';
@Component({
selector: 'contact-card',
template: `
<div class="contact-card">
<p>{{ contact.name }} ( {{ contact.age }} )</p>
<p>{{ contact.email }}</p>
</div>
`
})
export class ContactCardComponent {
@Input()
contact: Contact;
}
So now we’re all setup, what’s next?
Iterating collections
Now that our ContactCardComponent is included in our module, we can setup ourAppComponent to use this dataset:
@Component({...})
export class AppComponent implements OnInit {
contacts: Observable<Contact[]>;
ngOnInit() {
this.contacts = Observable.of([
{
"id": 1,
"name": "Laura",
"email": "[email protected]",
"age": 47
},
{
"id": 2,
"name": "Walter",
"email": "[email protected]",
"age": 37
},
{
"id": 3,
"name": "Walter",
"email": "[email protected]",
"age": 49
},
{
"id": 4,
"name": "Jesse",
"email": "[email protected]",
"age": 47
},
{
"id": 5,
"name": "Irene",
"email": "[email protected]",
"age": 33
}
]);
}
}
As mentioned in the introduction, I’m using Observable.of here from RxJS to give me an Observable stream from the results, this is a nice way to mimic an Observable response, such as when using the AngularHttp module to return data from your API.
Using ngFor
Now we’re setup, we can look into our AppComponent template:
@Component({
selector: 'app-root',
template: `
<div class="app">
<ul>
<li>
<contact-card></contact-card>
</li>
</ul>
</div>
`
})
You can see I’m declaring @Input setup inside our ContactCardComponent.
One way we could do this is using ngFor on the component itself, however for simplicity we’ll use the unordered list. Let’s addngFor:
*ngFor="let contact of contacts">
There are a few things happening here, the first you’ll notice a * character at the beginning of the ngFor, we’ll come onto what this means in the next section when we look at the element. Secondly, we’re creating a context calledcontact, using a “for of” loop - just like in ES6.
The ngFor Directive will clone the and the child nodes. In this case, the is a child node, and a card will be “stamped out” in the DOM for each particular item inside ourcontacts collection.
So, now we have contact available as an individual Object, we can pass the individualcontact into the
*ngFor="let contact of contacts">
[contact]="contact">
If you’re using a static array, or binding the result of an Observable to the template, you can leave the template as it currently is. However, we can optionally bind the Observable directly to the template, which means we’ll need theasync pipe here to finish things off:
*ngFor="let contact of contacts | async">
[contact]="contact">
You can check a live output of what we’ve covered so far here:
Using trackBy for keys
If you’re coming from an Angular 1.x background, you’ll have likely seen “track by” when using anng-repeat, and similarly in React land, usingkey on a collection item.
So what do these do? They associate the objects, or keys, with the particular DOM nodes, so should anything change or need to be re-rendered, the framework can do this much more efficiently. Angular’sngFor defaults to using object identity checking for you, which is fast, but can befaster!
This is where trackBy comes into play, let’s add some more code then explain:
*ngFor="let contact of contacts | async; trackBy: trackById;">
[contact]="contact">
Here we’ve added trackBy, then given it a value oftrackById. This is a function that we’ll add in the component class:
trackById(index, contact) {
return contact.id;
}
All this function does is use a custom tracking solution for our collection. Instead of using object identity, we’re telling Angular here to use the uniqueid property that each contact object contains. Optionally, we can use the index (which is the index in the collection of each item, i.e. 0, 1, 2, 3, 4).
If your API returns unique data, then using that would be a preferable solution overindex - as the index may be subject to change if you reorder your collection. Using a unique identifier allows Angular to locate that DOM node associated with the object much faster, and it will reuse the component in the DOM should it need to be updated - instead of destroying it and rebuilding it.
You can check a live output of what we’ve covered here:
Capturing “index” and “count”
The ngFor directive doesn’t just stop at iteration, it also provides us a few other niceties. Let’s exploreindex and count, two public properties exposed to us on each ngFor iteration.
Let’s create another variable called i, which we’ll assign the value ofindex to. Angular exposes these values under-the-hood for us, and when we look at the next section with the element, we can see how they are composed.
To log out the index, we can simply interpolate i:
*ngFor="let contact of contacts | async; let i = index;">
Index: {{ i }}
[contact]="contact">
This will give us every index, starting from 0, for each item in our collection. Let’s also exposecount:
*ngFor="let contact of contacts | async; let i = index; let c = count;">
Index: {{ i }}
Count: {{ c }}
[contact]="contact">
The count will return a live collection length, equivalent ofcontacts.length. These can optionally be bound and passed into eachindex of the particular contact into a function@Output:
*ngFor="let contact of contacts | async; let i = index; let c = count;">
[contact]="contact"
[collectionLength]="c"
(update)="onUpdate($event, i)">
You can check a live output of what we’ve covered here:
Accessing first, last, odd, even
Four more properties exposed by ngFor (well, actually underneath it usesNgForRow, a class which generates each ngFor item internally). Let’s quickly look at the source code for this:
export class NgForRow {
constructor(public $implicit: any, public index: number, public count: number) {}
get first(): boolean { return this.index === 0; }
get last(): boolean { return this.index === this.count - 1; }
get even(): boolean { return this.index % 2 === 0; }
get odd(): boolean { return !this.even; }
}
As I mentioned above, the NgForRow is what constructs ourngFor items, and you can see in the constructor we’ve already taken a look at index and count! The last things we need to look at are the getters, which we can explain from the source code above:
-
first: returns
truefor the first item in the collection, matches the index with zero -
last: returns
truefor the last item in the collection, matches the index with the total count, minus one to shift the “count” down one to cater for zero-based indexes -
even: returns
truefor even items (e.g. 2, 4) in the collection, uses%modulus operator to calculate based off index -
odd: returns
truefor odd items (e.g. 1, 3), simply invertsthis.evenresult
Using this, we can add conditionally apply things such as styling, or hook into thelast property to know when the collection has finished rendering.
For this quick demo, we’ll use ngClass to add some styles to each (note how we create more variables, just likeindex):
*ngFor="let contact of contacts | async; let o = odd; let e = even;"
[ngClass]="{
'odd-active': o,
'even-active': e
}">
[contact]="contact"
(update)="onUpdate($event, index)">
And some styles:
@Component({
selector: 'app-root',
styles: [`
.odd-active { background: purple; color: #fff; }
.even-active { background: red; color: #fff; }
`],
template: `
<div class="app">
<ul>
<li
*ngFor="let contact of contacts | async; let o = odd; let e = even;"
[ngClass]="{
'odd-active': o,
'even-active': e
}">
<contact-card
[contact]="contact"
(update)="onUpdate($event, index)">
</contact-card>
</li>
</ul>
</div>
`
})
We won’t demonstrate first and last, as it’s fairly obvious from the above how we can hook those up!
You can check a live output of what we’ve covered here:
element
We mentioned earlier in this article that we’d look at understanding what the * meant in our templates. This also shares the same syntax as *ngIf, which you’ve likely also seen before.
So in this next section, we’ll take a deeper dive on ngFor, * and the element to explain in more detail what’s really happening here.
When using an asterisk (*) in our templates, we are informing Angular we’re using a structural directive, which is also sugar syntax (a nice short hand) for using the element.
and Web Components
So, what is the element? First, let’s take a step back. We’ll roll back to showing some Angular 1.x code here, perhaps you’ve done this before or done something similar in another framework/library:
This overrides the type on the