javascript - Angular 4 ngFor元素的设置类

我是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);
  }
}

最佳答案

您应该使用[ngClass]而不是类

[ngClass]="linkItem.className"