*ngFor 子数组对象 - Angular + Firebase答案

【问题标题】：*ngFor subarray object - Angular + Firebase*ngFor 子数组对象 - Angular + Firebase
【发布时间】：2019-07-20 10:09:42
【问题描述】：

我正在尝试使用简单的ngFor，但我正在处理一个问题。

对象

export class Post {
  $key: string;
  title: string;
  subtitle: string;
  postedBy: string;
  imageUrl: string;
  paragraphs: [] = [];
}

我的意图是使用以下HTML 代码：

<p *ngFor="let p of databaseService.selectedPost[0].paragraphs">a</p>

意思是我想在我的对象的每个段落中显示一个段落，但是我收到了这个错误：

错误错误：找不到不同的支持对象“[object Object]” '对象'类型。 NgFor 仅支持绑定到 Iterables，例如数组。

我尝试在我的第一个段落中使用console.log(this.selectedPost[0].paragraphs.p1); 作为p1，它确实有效，但我无法从HTML 做到这一点（它有 p1、p2、p3.. 作为名称）。下图为console.log

这是数据库中的对象：

我该怎么做？

【问题讨论】：

databaseService.selectedPost[0].paragraphs 应该是数组。是吗？
我会说它是一个数组，我已经更新了问题
请检查您的数据是数组内的数组还是两个连接的数组。你需要这样对待他们
数据就是图片显示的样子。首先是一个数组（1 将是数组的第一个帖子），在这个数组内部你有一些元素，包括“段落”，我猜它是另一个数组（其中 p1、p2、p3 是元素）
如果这些是连接的数组，您可以尝试先访问顶部数组，然后访问您想要的实际数组。所以你需要在html中嵌套ngFor

【解决方案1】：

从事物的角度来看，databaseService.selectedPost[0].paragraph是一个对象，正如你所说，你可以直接访问p1。

我曾尝试使用 console.log(this.selectedPost[0].paragraphs.p1);在我的第一个段落中出现 p1 并且它确实有效

如果是这种情况，您可以使用 Angular 的 KeyValuePipe 和 *ngFor 进行迭代

一个工作示例如下所示：

<p *ngFor="let paragraph of databaseService.selectedPost[0].paragraphs | keyvalue">{{ paragraph.value }}</p>

【讨论】：

这几乎可以工作，但不能。如果我写 "
Hello
" 它用“Hello”在一个段落中写入 6 次，但我无法访问该变量。使用 {{paragraph}} 显示“[object Object]”，如果我尝试 {{p1}} 它什么也不显示
当然，所以paragraph 也是一个对象，它会有属性。你知道它的结构是什么样的吗？例如，如果对象paragraph 上有一个属性text，您可以将{{ paragraph.text }} 插入HTML（只是一个示例）
这是我正在尝试的。整个对象的结构是有问题的。在段落数组中，您有 p1、p2、p3、p4... 但尝试使用 {{paragraph.p1}} 失败
请看我更新的 HTML sn-p，我现在正在做{{ paragraph.value }}
太棒了，很高兴我能帮上忙 :)！