无法遍历对象数组中的所有元素； ngFor 或组件中的迭代只给了我第一个元素答案

【问题标题】：Unable to loop through all elements in an array of objects; ngFor or iteration in the component only gives me the first element无法遍历对象数组中的所有元素； ngFor 或组件中的迭代只给了我第一个元素
【发布时间】：2020-09-17 17:50:56
【问题描述】：

这听起来可能很奇怪，至少我觉得很奇怪，或者一些非常基本的东西正在逃避我：映射 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

【问题讨论】：

如果可以提供原始响应result，我们可以想出一种方法来初始化this.finalPhraseResults，而不会出现数组问题。
你确定截图是result而不是this.phraseResults？您似乎从结果中映射到一个名为 response 的属性，但在发布的屏幕截图中找不到它。
我正在从一个名为 response 的属性进行映射，该属性是我将其转换为数组的对象。然后我只使用 results 属性创建第二个数组
在这种情况下，您可以继续使用相同的过程并使用[0] 直接访问该项目或使用另一个封闭的*ngFor。或者，如果您确定第一个数组将只包含一个元素，您可以说 this.phraseResults=Array.of(result).map(x=>x['response'])['results'] 并忽略模板中的 [0]。
好的，这样也行，谢谢！

标签： arrays angular object

【解决方案1】：

看来你有一个数组数组。试试这个：

this.phraseResults=Array.of(result).map(x=>x['response'])
this.finalPhraseResults = this.phraseResults[0]

【讨论】：

【解决方案2】：

变量是数组的数组。快速修复将是

控制器

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

模板

<ul class="list-group" *ngFor="let p of finalPhraseResults[0]">
  ...
</ul>

【讨论】：

谢谢你们。现在看来一切都很清楚了。我将第二个答案标记为正确，因为它立即起作用。另一个需要更多的修复，无论如何谢谢！
它也可以这样工作：`this.phraseResults=Array.of(result).map(x=>x['response']).map(x=>x['results'] )`

【解决方案3】：

您可以使用该数组创建一个新变量来存储最终的短语结果和 ngFor*。应使用所有属性定义新类。

public class FinalPhraseResult{
public string id;
public string type;
public string sectionId;
}

现在您可以在 ts 文件中声明一个变量 public finalPhraseResult:FinalPhraseResult[] = [];

在您的订阅中，您可以为这个新数组赋值 this.finalPhraseResult = this.phraseResults.map(x=>x['results'])[0];

这是重要的部分，因为结果返回也是一个数组，你必须从索引0中选择。

现在可以在html模板中使用

<ul class="list-group" *ngFor="let p of finalPhraseResult">
  ...
</ul>

【讨论】：