md-nav-list是Angular Material库中的一个组件,用于创建导航菜单列表。它可以与*ngFor指令结合使用,动态地生成列表项。
在设置*ngFor列表中的默认选定项时,可以通过在组件中定义一个变量来实现。首先,在组件的类中声明一个变量,例如selectedItem,用于存储默认选定项的值。
然后,在模板中使用*ngFor指令遍历列表,并使用ngClass指令来动态添加CSS类,以标识选定项。在ngClass中,可以使用条件表达式判断当前项是否为默认选定项,如果是,则添加一个表示选定状态的CSS类。
以下是一个示例代码:
<md-nav-list>
<a md-list-item *ngFor="let item of items" [ngClass]="{'selected': item === selectedItem}">
{{ item }}
</a>
</md-nav-list>
在上述代码中,items是一个包含列表项的数组。通过*ngFor指令遍历items数组,生成对应的列表项。使用ngClass指令来动态添加CSS类,当item等于selectedItem时,添加selected类,表示选定状态。
在组件的类中,可以通过初始化selectedItem变量来设置默认选定项的值。例如:
export class MyComponent {
items: string[] = ['Item 1', 'Item 2', 'Item 3'];
selectedItem: string = 'Item 2';
}
在上述代码中,selectedItem被初始化为'Item 2',因此列表中的第二个项将被设置为默认选定项。
关于腾讯云相关产品和产品介绍链接地址,可以参考腾讯云官方文档或官方网站获取最新信息。
领取专属 10元无门槛券
手把手带您无忧上云