Angular2 ngFor 在选择列表中，根据对象中的字符串设置活动

typescript

使用Angular2的*ngFor指令可以轻松地在选择列表中遍历对象数组。而通过使用对象中的字符串属性，我们可以设置活动选项。下面将详细介绍如何实现这一功能，并提供一个案例代码。

首先，让我们来看一下如何使用*ngFor指令在选择列表中遍历对象数组。在Angular2中，*ngFor指令允许我们在HTML模板中使用循环，以便对数组或集合进行迭代。我们可以通过以下方式在模板中使用*ngFor指令：

html
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

在上面的代码中，我们使用*ngFor指令迭代名为items的数组，并将每个数组元素赋值给名为item的变量。然后，我们将item的值显示在一个li元素中。

接下来，我们将看一下如何使用对象中的字符串属性来设置活动选项。假设我们有一个Person对象数组，每个对象都有一个名为status的属性，其值为字符串。我们可以通过以下方式在选择列表中设置活动选项：

html
<ul>
  <li *ngFor="let person of people" [class.active]="person.status === 'active'">{{ person.name }}</li>
</ul>

在上面的代码中，我们使用*ngFor指令迭代名为people的Person对象数组，并将每个对象赋值给名为person的变量。然后，我们使用[class.active]属性绑定来设置li元素的活动状态。当person对象的status属性值为'active'时，活动状态将被设置为true，从而应用active类。

现在，让我们来看一个完整的示例代码，演示如何使用*ngFor指令根据对象中的字符串属性设置活动选项：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: <code>
    <h2>选择列表</h2>
    <ul>
      <li *ngFor="let person of people" [class.active]="person.status === 'active'">{{ person.name }}</li>
    </ul>
  </code>,
  styles: [
    '.active { color: red; }'
  ]
})
export class AppComponent {
  people = [
    { name: 'Alice', status: 'active' },
    { name: 'Bob', status: 'inactive' },
    { name: 'Charlie', status: 'active' }
  ];
}

在上面的代码中，我们创建了一个名为AppComponent的组件，并在模板中使用*ngFor指令来遍历people数组。根据每个人的status属性值，我们设置了相应的活动状态。此外，我们还定义了一个.active样式类，用于将活动选项标记为红色。

通过上述示例代码，我们可以轻松地根据对象中的字符串属性设置活动选项。这为我们在选择列表中使用*ngFor指令提供了更多的灵活性。无论是用于展示活动状态，还是其他任何需要根据对象属性进行动态设置的场景，都可以使用这种方法。