在我的app.component.ts
我有ngFor
:
import { Component,OnInit } from '@angular/core';
import { Contact } from './contact';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
@Component({
selector: 'app-root',
styles: [`
.odd { background: purple; color: #fff; }
.even { background: red; color: #fff; }
`],
template: `
<div class="app">
<ul>
<li *ngFor = "let contact of contacts | async;trackBy : trackById;let i = index;let c = count;let e = even; let o = odd;"
[ngClass] = "{
odd : o,
even: e
}">
Index : {{i}}
Count : {{c}}
<contact-card [selectedContact]="contact"></contact-card>
</li>
</ul>
</div>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'app works!';
contacts: Observable<Contact[]>;
ngOnInit(){
this.contacts = Observable.of([
{
"id": 1,
"name": "Laura",
"email": "lbutler0@latimes.com",
"age": 47
},
{
"id": 2,
"name": "Walter",
"email": "wkelley1@goodreads.com",
"age": 37
},
{
"id": 3,
"name": "Walter",
"email": "wgutierrez2@smugmug.com",
"age": 49
},
{
"id": 4,
"name": "Jesse",
"email": "jarnold3@com.com",
"age": 47
},
{
"id": 5,
"name": "Irene",
"email": "iduncan4@oakley.com",
"age": 33
}
]);
function trackById(index,contact){
return contact.id;
}
}
}
而且,contact-card.component
我有
import { Component,Input } from '@angular/core';
import { Contact } from './contact';
@Component({
selector:'contact-card',
template:`
<div class="contact-card">
<p>{{ selectedContact.name }} ( {{ selectedContact.age }} )</p>
<p>{{ selectedContact.email }}</p>
</div>
`
})
export class ContactCardComponent {
@Input()
selectedContact : Contact;
}
为什么ngClass
无效?
它没有显示样式。