Angular 4 ngFor組件類

Question

我是Angular的新手，我嘗試使用材質列表和ngFor製作側邊菜單。

<md-list-item 
    *ngFor="let linkItem of linkItems" 
    class="{{linkItem.className}}" 
    routerLink="{{linkItem.routerLink}}" 
    (click)="listItemClickToggle(linkItem)"> 
    {{linkItem.linkName}} 
</md-list-item > 

一切工作正常，除了設置class。有沒有不同的方法來做到這一點？

app.component.ts

import { Component, OnInit } from '@angular/core'; 

import { LinkItem } from './link-item'; 

const LINK_ITEMS: LinkItem[] = [ 
    { 
    linkName: 'Weather', 
    className: 'list-item', 
    routerLink: '/weather' 
    }, 
    { 
    linkName: 'Top visits', 
    className: 'list-item', 
    routerLink: '/visits' 
    }, 
    { 
    linkName: 'Photo Gallery', 
    className: 'list-item', 
    routerLink: '/gallery' 
    } 
] 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 



export class AppComponent implements OnInit { 
    title = 'My forum'; 

    linkItems: LinkItem[] = LINK_ITEMS; 
    selectedListItem: LinkItem; 

    constructor() { 
    } 

    ngOnInit(): void { 
    this.selectedListItem = null; 
    } 

    listItemClickToggle(linkItem: LinkItem): void { 
    console.log(linkItem); 
    } 
} 

Answer 1

您應該使用[ngClass]，而不是僅僅類

[ngClass]="linkItem.className"