Javascript Typescript/Angular 7：如何迭代与Object.keys接口匹配的对象？

我对Javascript和Typescript/Angular很陌生

我正在从一个网站上获取数据/游戏统计数据，以制作我自己的统计应用程序。我已经创建了一个具有定义键/值的接口，以匹配我希望在模板上显示的数据

我希望显示的API响应是嵌套对象的形式。因此，我使用Object.keys来迭代对象，并在HTML模板上显示结果

我能够很好地显示特定嵌套对象的JSON。我的问题是：它显示该对象的整个键值，而不是我在接口中定义的特定键值

在我的HTML中，我通过名为lifeTimeStat Object.keyslifeTimeStat的接口循环-另请参见下面的完整HTML

考虑到我需要如何迭代对象，我尝试将lifeTimeStat接口设置为对象。。像这样：

`export class CombatListComponent implements OnInit {

constructor(public combatService: CombatService) { }

lifeTimeStats: lifeTimeStat = {
headshotKills: null,
             kills: null,
             longestKill: null, 
             maxKillStreaks: null,
             dailyKills: null,
             weeklyKills: null,
             damageDealt: null,
             roadKills: null,
             teamKills: null,
              vehicleDestroys: null,
              suicides: null,
              roundMostKills: null,
              dBNOs: null,
              assists: null
  } 


ngOnInit() {
this.combatService.getCombat().subscribe(data => {this.lifeTimeStats = 
data} );  
}
}

`

但是，当然，我得到了这个错误：TypeError：无法读取未定义的属性“key”。。因此，我似乎没有以正确的方式将接口转换为对象

让JSON显示在HTML中的唯一方法是定义 Object=Object，而不是那种把我的界面变成对象的蹩脚尝试。。啊。Object=Object只显示整个对象，而不是我的界面的特定形状

HTML:batch-list.component.HTML {{lifeTimeStats[key].attributes.gameModeStats.solo | json}

服务组件：combat.Service.ts

`@Injectable({
  providedIn: 'root'
})
export class CombatService {
getCombat():Observable<lifeTimeStat> {

return this.http.get<lifeTimeStat>(this.configUrl,  { observe:'body',   
responseType: 'json', headers: getHeaders });    

}`

---

我只想显示我在界面中定义的所选数据。我已经在谷歌上搜索了两、三天，搜索了好几个小时：

所以这个语法应该可以：

Object
  .keys({ a: 1, b: 2 })
  .map(key => console.log(key));

如果不是，为什么不将数组分配给变量并迭代该变量

在任何情况下，您都可以使用这个很好的帮助器来保留类型并迭代键和值：

const testObject = {
  completed: true,
  score: 129.1,
  description: 'none',
};

entries(testObject)
 .map(([key, value]) => console.log(`Key is ${key}, value is ${value}`));

function entries<K>(object: K)  {
    return (Object.keys(object) as (keyof K)[])
        .filter((key) => object[key] !== undefined && object[key] !== null)
        .map(
            key => ([
                key,
                object[key],
            ] as [keyof K, Required<K>[keyof K]]),
    );
}

type Required<T> = {
    [P in keyof T]-?: T[P];
};

或者对于您的情况：

const keyValuePairs = entries(lifeTimeStat);

...

<div *ngFor="const [key, value] of keyValuePairs">    {{ value.attributes.gameModeStats.solo| json }}  </div> <br>

---

有意思，我会试试这个然后回来。谢谢：

const keyValuePairs = entries(lifeTimeStat);

...

<div *ngFor="const [key, value] of keyValuePairs">    {{ value.attributes.gameModeStats.solo| json }}  </div> <br>