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"

Angular 4 ng为元素的set类

1 个答案: