Typescript / Angular 7: Как я могу перебрать Object, соответствующий моему интерфейсу с Object.keys?

Question

Я довольно новичок в Javascript и Typescript / Angular ..

Я получаю статистику данных / игр с веб-сайта, чтобы создать собственное приложение статистики. Я создал интерфейс с определенными ключом / значениями, чтобы соответствовать данным, которые я хочу показать в моем шаблоне.

Ответ API, который я хочу показать, имеет форму вложенных объектов. Из-за этого я использую Object.keys (), чтобы перебрать объекты и показать результат в моем HTML-шаблоне.

Я могу показать JSON конкретного вложенного объекта просто отлично. Моя проблема: он показывает ВЕСЬ ключ / значения этого объекта, а не конкретные значения ключей, которые я определил в своем интерфейсе.

В моем HTML я зацикливаюсь на своем интерфейсе с именем lifeTimeStat Object.keys(lifeTimeStat) - (также см. Полный 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: Cannot read property 'keys' of undefined .. Так что, похоже, янеправильно превращаю мой интерфейс в объект ..

Единственный способ, с помощью которого я могу заставить JSON отображаться в моем HTML, это если я вместо этого определю Object = Object вместо этой дурацкой попытки превратить мой интерфейс вобъект .. Argh. Object = Object просто покажет весь объект, а не конкретную форму моего интерфейса.

HTML: battle-list.component.html <div *ngFor="let key of Object.keys(lifeTimeStat)"> {{ lifeTimeStats[key].attributes.gameModeStats.solo| json }} </div> <br>

Сервисный компонент: battle.service. ts

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

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

}`

Интерфейс:

    `export interface lifeTimeStat {


            headshotKills: number,
             kills: number,
             longestKill: number, 
             maxKillStreaks: number,
             dailyKills: number,
             weeklyKills: number,
             damageDealt: number,
             roadKills: number,
             teamKills: number,
              vehicleDestroys: number,
              suicides: number,
              roundMostKills: number,
              dBNOs: number,
              assists: number,



}  `

Я просто хочу показать выбранные данные, как я определил в моем интерфейсе. Я гуглял / искал SO много часов в течение двух, почти трех дней: (* ​​1033 *

Answer 1

Так что этот синтаксис должен работать:

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>