角度-如何显示包含数组的数组中的数据？

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管道。

只需通过ngForOf循环低谷response.answers

<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并显示每个实体。 或者，您可以将数组聚合为单个值并显示它（如上所示）