Angular 4 ngFür die Klasse für Element

Question

Ich bin neu in Angular und ich versuche, Side-Menü mit Materiallisten und ngFor zu machen.

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

alles funktioniert, außer feinen class Einstellung. Gibt es einen anderen Ansatz dafür?

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

Sie sollten [ngClass] verwenden, anstatt nur Klasse

[ngClass]="linkItem.className"