Angular - Как отобразить данные из массива, который содержит массивы?

Question

Я пытаюсь отобразить некоторые данные из массива, в котором есть массивы, но он просто продолжает выдавать ошибку;

Я пытался использовать keyvaule, но это не помогло.

Это ответ, который я получаю от API

{
  "answers": [
    {
      "questions": [
        "Whats the weather like today?"
      ],
      "answer": "Sunny",
      "score": 100,
      "id": 1,
    }
  ],
}

и это HTML-код, который у меня есть

<li *ngFor="let result of searchData | keyvalue">
    <h3 class="uk-accordion-title uk-margin-remove" >{{result.answers.questions}}</h3>
    <div class="uk-accordion-content">
        <p>{{ result.answers.answer }}</p>
    </div>
</li>

Вот так выглядит мой компонент;

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import { HttpClient } from '@angular/common/http';
import { FaqModel } from '../_core/models/faq.model';

@Component({
  selector: 'app-faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.css']
})
export class FaqComponent implements OnInit {
  snapshotParam = "initial value";
  subscribedParam = "initial value";
  API_TOPIC = 'URL';
  API_FAQ = 'URL';
  topics = [];
  asideData: any;
  faqData: any;
  API_SEARCH = 'URL';
  searchData: any;

  constructor(
    private readonly route: ActivatedRoute,
    private readonly router: Router,
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.subscribedParam = params.get("id");
    });
    this.http.get<AsideModel[]>(this.API_TOPIC).subscribe(data => {
      this.asideData = data;
    });
  }

  goto(id: string): void {
    this.http.get<FaqModel>('URL' + id).subscribe(faqData => {
      this.faqData = faqData;
    });
  }

  postSearch(){
    this.http.post<any>(this.API_SEARCH,{question:'Whats the weather like today?'}).subscribe(searchData => {
      this.searchData = searchData;
    });
 }

}
interface AsideModel {
  id: string;
  name: string;
  lastPublishedTimestamp: string;
  language: string;
}

Я бы хотел, чтобы {{result.answers.questions}} отобразил вопрос, и для {{result.answers.answer}} отобразить ответ

Answer 1

Во-первых, вам не нужно использовать keyvalue трубу.

Просто петля корыта response.answers с ngForOf

<li *ngFor="let answer of searchData.answers">
    <h3 class="uk-accordion-title uk-margin-remove" >{{ answer.questions.join(', ') }}</h3>
    <div class="uk-accordion-content">
        <p>{{ answer.answer }}</p>
    </div>
</li>

answer.questions это массив, поэтому вам нужно выполнить цикл через questions и отобразить каждую сущность. Или вы можете объединить массив в одно значение и отобразить его (как показано выше)