首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

md-nav-list设置*ngFor列表中的默认选定项

md-nav-list是Angular Material库中的一个组件,用于创建导航菜单列表。它可以与*ngFor指令结合使用,动态地生成列表项。

在设置*ngFor列表中的默认选定项时,可以通过在组件中定义一个变量来实现。首先,在组件的类中声明一个变量,例如selectedItem,用于存储默认选定项的值。

然后,在模板中使用*ngFor指令遍历列表,并使用ngClass指令来动态添加CSS类,以标识选定项。在ngClass中,可以使用条件表达式判断当前项是否为默认选定项,如果是,则添加一个表示选定状态的CSS类。

以下是一个示例代码:

代码语言:html
复制
<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变量来设置默认选定项的值。例如:

代码语言:typescript
复制
export class MyComponent {
  items: string[] = ['Item 1', 'Item 2', 'Item 3'];
  selectedItem: string = 'Item 2';
}

在上述代码中,selectedItem被初始化为'Item 2',因此列表中的第二个项将被设置为默认选定项。

关于腾讯云相关产品和产品介绍链接地址,可以参考腾讯云官方文档或官方网站获取最新信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券