for 각 루프 각도 2

Question

프로젝트로 각도 2으로 작업 중입니다.
내 시나리오 중 하나에서 API 호출에서 Array를 가져옵니다. 내가

키 1키 2KEY3
값 1 값 2 VALUE3
값 1 값 2 VALUE3
값 1 값 2와 같은 테이블을 생성 할
[{'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}, {'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}, {'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}]

이 배열을 사용하여 :
배열은 같다 값 3

01 23,516,

그래서, 내 질문에 내가 key 및 배열

에서 value 어떤 forEach 루프가 있습니까받을 수 있나요 어떻게? 데이터가 당신의 API

에서 올 때

Answer 1

는 새 KeysArray가 구성 요소에서 다음 코드를가는 가지 만들어야합니다. 각 객체가 동일한 키를 보유한다고 가정합니다.

keysArray = Object.keys(this.apiData[0]); 

이제 키 배열과 apiData를 템플릿에서 다음과 같이 반복하십시오.

<table> 
    <thead> 
     <tr> 
      <th *ngFor="let key of keysArray; let i = index;">{{key}}</th> 
     <tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of apiData;"> 
      <td *ngFor="let key of keysArray;">{{item[key]}}</td> 
     <tr> 
    </tbody> 
</table>