Angular 遍历列表时的key

丨我是张先生丨2024-07-30 13:52

在Angular中，你可以使用keyvalue管道来遍历对象的键。这里是一个简单的例子，展示了如何在Angular模板中使用它：

html 复制代码

<div *ngFor="let key of myObject | keyvalue:key">
  Key: {{ key }} - Value: {{ myObject[key] }}
</div>

在这个例子中，myObject是一个包含键值对的对象。*ngFor指令与keyvalue管道结合使用，可以迭代对象中的每个键。

以下是完整的Angular组件示例：

TypeScript 复制代码

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-key-value-example',
  template: `
    <div *ngFor="let key of myObject | keyvalue:key">
      Key: {{ key }} - Value: {{ myObject[key] }}
    </div>
  `
})
export class KeyValueExampleComponent {
  myObject = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30
  };
}

请注意，你需要在你的Angular项目中包含keyvalue管道。如果你的项目中没有这个管道，你可以创建一个自定义的管道来实现键的迭代。下面是一个简单的keyvalue管道实现：

TypeScript 复制代码

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'keyvalue'
})
export class KeyvaluePipe implements PipeTransform {
  transform(value) {
    return Object.keys(value);
  }
}

将此管道添加到你的模块中，并确保在你的模板中正确使用它。