Angular 4 ngFor组件类
问题描述:
我是Angular的新手,我尝试使用材质列表和ngFor制作侧边菜单。Angular 4 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"
会发生什么,当你的开发人员工具检查?你看到'class =“”'还是没有class属性被添加到' md-list-item>'? –
Dhyey