개체 배열의 모든 요소를 반복 할 수 없습니다. ngFor 또는 구성 요소의 반복은 첫 번째 요소 만 제공합니다.

이상하게 들릴 수 있습니다. 적어도 이상하게 들리거나 매우 기본적인 것이 나를 탈출하고 있습니다. API 응답을 매핑 한 후 10 개의 객체 배열을 변수에 저장합니다. 데이터는 다음과 같습니다.

이것이 데이터를 얻는 방법입니다. 표시된 로그의 출처 this.finalPhraseResults:

receivedPhrase(value){
    this.guardian.searchByPhrase(value)
    .subscribe(result=>{
      this.phraseResults=Array.of(result).map(x=>x['response'])
      this.finalPhraseResults = this.phraseResults.map(x=>x['results']);
     console.log(this.finalPhraseResults)
    })
  }

그리고 HTML

<ul class="list-group" *ngFor="let p of finalPhraseResults">
      <li class="list-group-item">
        {{p.type}}
      </li>
      <li class="list-group-item">
        {{p.sectionId}}
      </li>
      <li class="list-group-item">
        {{p.sectionName}}
      </li>
      <li class="list-group-item">
        {{p.webPublicationDate}}
      </li>
      <li class="list-group-item">
        <button mat-raised-button color="primary" (click)="goToPhraseExternal(p.id)">Go to article</button>
      </li>
    </ul>

결과는 빈 페이지입니다. 그러나 다음과 같이 작성하면 :

this.finalPhraseResults = this.phraseResults.map(x=>x['results'][0]);

데이터가 렌더링되지만 첫 번째 개체에서만 나타납니다. 그래서 저는 여기서 길을 잃었습니다. 누군가가 무슨 일이 일어나고 있는지 설명해 줄 수 있습니까?

원본 응답 @Michael D 편집