无序列表中嵌套ngFor的Angular 6+ set active

无序列表中嵌套ngFor的Angular 6+ set active是指在Angular 6及以上版本中，使用ngFor指令在无序列表（ul）中嵌套循环渲染数据，并设置active状态。

在Angular中，ngFor是一个结构型指令，用于循环渲染一组数据。无序列表（ul）是HTML中的一种标签，用于创建一个无序列表。

当我们需要在无序列表中嵌套ngFor指令时，可以通过以下步骤实现：

1. 在组件中定义一个数组，用于存储要循环渲染的数据。例如，可以定义一个名为items的数组。
2. 在HTML模板中，使用ngFor指令来循环渲染数据。语法为*ngFor="let item of items"。这将遍历items数组，并为每个元素创建一个li标签。
3. 在循环渲染的li标签中，可以使用条件语句或其他逻辑来设置active状态。例如，可以使用ngClass指令根据某个条件来动态添加active类。语法为ngClass="{'active': condition}"。

下面是一个示例代码：

组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-list',
  template: `
    <ul>
      <li *ngFor="let item of items" [ngClass]="{'active': item.isActive}">
        {{ item.name }}
      </li>
    </ul>
  `,
  styles: [`
    .active {
      color: red;
    }
  `]
})
export class ListComponent {
  items = [
    { name: 'Item 1', isActive: true },
    { name: 'Item 2', isActive: false },
    { name: 'Item 3', isActive: true }
  ];
}

在上面的示例中，我们定义了一个名为items的数组，其中包含三个对象，每个对象都有一个name属性和一个isActive属性。在HTML模板中，我们使用ngFor指令循环遍历items数组，并为每个元素创建一个li标签。同时，根据isActive属性的值，动态添加active类来设置active状态。在样式中，我们定义了active类的样式，将文本颜色设置为红色。

这样，当组件被渲染时，无序列表中的每个li标签都会根据isActive属性的值来设置active状态。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
• 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse