如何在不使用管道的情况下使用* ngFor访问对象键

时间:2017-09-16 14:32:37

标签: javascript angular typescript ecmascript-6

我使用*ngFor循环数据并生成动态表。但我只能访问对象的值而不是键。如何使用*ngFor在不使用管道的情况下访问对象键

export class AppComponent {
  users: {}[] = [{
    firstName: 'John',
    lastName: 'Doe',
    email: 'johndoe@example.com'
  },
  {
    firstName: 'Jane',
    lastName: 'Doe',
    email: 'janedoe@example.com'
  },
  {
    firstName: 'Mary',
    lastName: 'Doe',
    email: 'marydoe@example.com'
  }
];
}

2 个答案:

答案 0 :(得分:0)

您可以使用它来访问对象的键

*ngfor="let user of users; i=index"

答案 1 :(得分:0)

由于您不想使用 Pipe ,您可以使用TS中的 Object.keys; 来获取密钥

export class App {
  users = [{
    firstName: 'John',
    lastName: 'Doe',
    email: 'johndoe@example.com'
  },
  {
    firstName: 'Jane',
    lastName: 'Doe',
    email: 'janedoe@example.com'
  },
  {
    firstName: 'Mary',
    lastName: 'Doe',
    email: 'marydoe@example.com'
  }
];
  getKeys = Object.keys;

}

并在模板中

 <div *ngFor="let key of getKeys(users[0])">{{key + ' : ' + users[0][key]}}

DEMO