如何在 Angular html 中显示具有多个数组的 JSON 对象的内容？答案

【问题标题】：How to display the contents of a JSON object with multiple arrays in angular html?如何在 Angular html 中显示具有多个数组的 JSON 对象的内容？
【发布时间】：2019-11-24 12:40:32
【问题描述】：

我创建了一个 JSON 对象，其中包含数组，对应于 CSV 文件的字段，这些字段是使用库 papa Parse 解析的。我想在 HTML 中显示这些，但我不知道如何从 JSON 对象中提取数组并将它们放入一个可以在 html 中显示的变量中。

打字稿

 func(){
    this.fileHasBeenUploaded = true;
    this.csvData = reader.result as string;
    console.log(this.csvData);
    console.log(this.papa.parse(this.csvData));
    this.resultObj = this.papa.parse(this.csvData);}

html

<div *ngIf='fileHasBeenUploaded'>
TESTING TESTING: 

<div *ngFor="let i of resultObj">
  <span *ngFor="let j of i">
    {{j}}
  </span>
</div>
<div>
  the array is: {{resultObj}}
</div>

我的嵌套 *ngFor 循环出错，尝试直接显示对象只显示“[object Object]”

【问题讨论】：

如果您只是将它们称为“对象”和“数组”而不是提及 JSON，那么您将可以更轻松地搜索和讨论这个问题，除非您实际上是在处理文本/字符串JavaScript 中的值变量。
Getting the object's property name的可能重复
你能发布一个你的数据示例吗？
您想显示数据以用于调试目的还是以优雅的方式显示？出于调试目的，您可以使用<pre>{{resultObj | json}}</pre>

标签： javascript html json angular typescript

【解决方案1】：

最简单的方法是将包含数组的对象转换为包含数组的数组。 *ngFor 只能迭代可迭代对象。

model.ts

export interface ObjectContainingArrays<T = any> {
    [key:string]: Array<T>;
}

组件.ts

public func():void {
   this.fileHasBeenUploaded = true;
   this.csvData = reader.result as string;
   const resultObj:ObjectContainingArrays = this.papa.parse(this.csvData) as any;
   this.resultArr = Object.values(resultObj);
}

component.html

<div *ngFor="let i of resultArr">
   <span *ngFor="let j of i">
      {{j}}
    </span>
</div>

编辑：更新为使用 any 而不是 unknown

Edit2：删除了赋值中的类型注释（语法错误）

【讨论】：

我收到的错误是 PapaParseResult 不能分配给类型 'ObjectContainingArrays 以及“运算符 '
由于我不知道 PapaParseResult 是什么（您从未提到过该数据类型），所以我介绍了我自己的数据类型，以展示我期望您的数据的结构。在您的情况下随意删除它并改用 PapaParseResult 。在最近的打字稿更新中引入了未知。也许你有一个旧版本 - 使用“任何”而不是未知。看不到任何可能导致“操作员”错误的东西。也许在你没有发布的代码中？
@bigcoder536 抱歉，我的代码有一个错误：this.resultArr 有一个类型注释，尽管它是一个赋值。我相应地调整了代码。