Angular 2中的ngClass不起作用

时间:2017-09-03 14:35:10

标签: angular angular2-directives

在我的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无效? 它没有显示样式。

0 个答案:

没有答案