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

我试图显示一个包含数组的数组中的一些数据，但它总是给我错误信息

我尝试过使用keyvaule，但似乎没有任何帮助

这是我从api得到的响应

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

这是我目前使用的html

{{result.answers.questions}
{{result.answers.answer}

这就是我的组件的外观

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;
}

从'@angular/core'导入{Component，OnInit}；
从“@angular/Router”导入{ActivatedRoute，Router}”；
从'@angular/common/http'导入{HttpClient}；
从“../\u core/models/faq.model”导入{FaqModel}；
@组成部分({
选择器：“应用程序常见问题”，
templateUrl:“./faq.component.html”，
样式URL:['./faq.component.css']
})
导出类FAQ组件实现OnInit{
snapshotParam=“初始值”；
subscribedParam=“初始值”；
API_主题='URL'；
API_常见问题='URL'；
主题=[]；
亚洲数据：任何；
常见问题解答数据：任何；
API_搜索='URL'；
搜索数据：任何；
建造师(
专用只读路由：ActivatedRoute，
专用只读路由器：路由器，
私有http:HttpClient
) { }
恩戈尼尼特（）{
this.route.paramMap.subscribe（params=>{
this.subscribedParam=params.get（“id”）；
});
this.http.get（this.API_主题）.subscribe（数据=>{
this.asideData=数据；
});
}
转到（id:字符串）：无效{
this.http.get（'URL'+id）.subscribe（faqData=>{
this.faqData=faqData；
});
}
后期搜索（）{
this.http.post（this.API_SEARCH，{问题：'今天天气怎么样？}）.subscribe（searchData=>{
this.searchData=searchData；
});
}
}
接口解调器{
id：字符串；
名称：字符串；
lastPublishedTimestamp:字符串；
语言：字符串；
}

我想{{result.answers.questions}}显示问题，

---

对于{result.answers.answer}来说，首先显示答案

，不需要使用

keyvalue

管道

只需通过

响应循环即可。使用
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.answer}



answer.questions
这是一个数组，因此您需要通过
questions
循环并显示每个实体。或者您可以将数组聚合为单个值并显示它（如上所示）
首先，您不需要使用
keyvalue
管道

只需通过
响应循环即可。使用
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.answer}



answer.questions
这是一个数组，因此您需要通过
questions
循环并显示每个实体。或者，您可以将数组聚合为单个值并显示它（如上所示）
您想循环“answers”数组吗？实际上searchData为空，错误来自API尝试使用调试器或控制台日志打印订阅中的searchData您想循环“answers”数组吗？实际上searchData为空，错误来自API尝试使用调试器或控制台日志打印订阅中的searchData您知道为什么在尝试解决方案后会出现此错误吗？我已经更新了我的原始帖子以包含我的组件，searchData是否已定义？或者我做错了吗？您没有定义，因为在呈现组件时API调用没有返回。使用安全导航操作符：
searchData？.answers
。您知道我在尝试您的解决方案后为什么会出现此错误吗？我已经更新了我的原始帖子以包含我的组件，searchData是否已定义？或者我做错了吗？您没有定义，因为在呈现组件时API调用没有返回。使用安全导航操作符：
searchData？.answers
。