获取存储为对象数组的角度数据答案

【问题标题】：get data in angular stored as array of objects获取存储为对象数组的角度数据
【发布时间】：2021-09-04 23:11:53
【问题描述】：

我想获取存储在 template_A 中的数据，即 col_1 和 col_2 并以表格格式打印，但我得到的是 [object,object]。我不知道如何获取存储为对象数组的数据。

我想在 template_A 旁边打印。您可以在控制台中查看数组。

{
    "_id": {
        "$oid": "611f354944c4571778df456c"
    },
    "assignmentId": "61235a452a8a2428a43514ed",
    "studentId": "60dafc5c0254f7122e9fe7f0",
    "assignmentOf": "subject",
    "createdAt": {
        "$date": "2021-08-20T04:53:29.717Z"
    },
    "updateAt": {
        "$date": "2021-08-20T04:53:29.717Z"
    },
    "__v": 0,
    "grade": "b ",
    "remark": "good",
    "template": "template_A",
    "template_A": {
        "col_1": "col_1",
        "col_2": "col_2"
    },
    "template_B": {
        "col_1": "col_1",
        "col_2": "col_2"
    }
}

角度应用

                          <table>
                            <tr >
                              <td>{{ singleAssignment.template }}</td>
                              <td>{{ singleAssignment.template_A[0] }}</td>
                              <!-- <td>{{ singleAssignment.template_A[0] }}</td> -->
                            </tr>
                          </table>

【问题讨论】：

标签： node.js angular mongodb express

【解决方案1】：

两种方式

1.将你的json对象转换成json数组，然后在html中使用*ngFor。

"template_A": [
        { "col_1": "col_1" },
        { "col_2": "col_2" },
      ]

2.在*ngFor中使用Object.keys

"template_A": {
      "col_1": "col_1_value",
      "col_2": "col_2_value"
  }

在 .ts 文件中

public ObjectKeys = Object.keys

在 .html 文件中

<div  *ngFor="let cols of ObjectKeys(singleAssignment.template_A)">
   {{cols}}
   {{singleAssignment.template_A[cols]}}
</div>

输出 -

col_1 col_1_value
col_2 col_2_value

【讨论】：

【解决方案2】：

我已经为你修改了代码，请看一下

TS 代码

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  singleAssignment: any;

  constructor() {
    this.singleAssignment = {
      "_id": {
          "$oid": "611f354944c4571778df456c"
      },
      "assignmentId": "61235a452a8a2428a43514ed",
      "studentId": "60dafc5c0254f7122e9fe7f0",
      "assignmentOf": "subject",
      "createdAt": {
          "$date": "2021-08-20T04:53:29.717Z"
      },
      "updateAt": {
          "$date": "2021-08-20T04:53:29.717Z"
      },
      "__v": 0,
      "grade": "b ",
      "remark": "good",
      "template": "template_A",
      "template_A": {
          "col_1": "col_1",
          "col_2": "col_2"
      },
      "template_B": {
          "col_1": "col_1",
          "col_2": "col_2"
      }
    }
  }
}

HTML 代码

<table>
  <tbody>
    <tr >
      <td>{{ singleAssignment.template }}</td>
      <td>{{ singleAssignment.template_A['col_1']}}</td>
      <td>{{ singleAssignment.template_A['col_2'] }}</td>
    </tr>
  </tbody>
</table>

输出

================================================ ==============================

更新

TS 代码

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  singleAssignment: any;

  constructor() {
    this.singleAssignment = {
      "_id": {
          "$oid": "611f354944c4571778df456c"
      },
      "assignmentId": "61235a452a8a2428a43514ed",
      "studentId": "60dafc5c0254f7122e9fe7f0",
      "assignmentOf": "subject",
      "createdAt": {
          "$date": "2021-08-20T04:53:29.717Z"
      },
      "updateAt": {
          "$date": "2021-08-20T04:53:29.717Z"
      },
      "__v": 0,
      "grade": "b ",
      "remark": "good",
      "template": "template_A",
      "template_A": [
        {
          "col_1": "col_1",
          "col_2": "col_2"
        }
      ],
      "template_B": {
          "col_1": "col_1",
          "col_2": "col_2"
      }
    }
  }
}

HTML 代码

<table>
  <tbody>
    <tr >
      <td>{{ singleAssignment.template }}</td>
      <td>{{ singleAssignment.template_A[0]['col_1']}}</td>
      <td>{{ singleAssignment.template_A[0]['col_2'] }}</td>
    </tr>
  </tbody>
</table>

输出

【讨论】：

@Suneelumar 我试过你的解决方案对我不起作用。
你能分享你的代码吗？这样我可以检查
就像我也通过运行上面的示例分享了屏幕截图一样，对我来说它工作正常，你面临什么问题？
`
{{ singleAssignment.template }} {{ singleAssignment.template_A['col_1'] }} {{ singleAssignment.template_A['col_2'] }}
`使用这个解决方案我没有得到任何结果。我可以获取模板但不能获取模板_A
分享您的输出屏幕截图并对此进行编码singleAssignment

【解决方案3】：

在singleAssignment.template_A 上使用*ngFor 指令，然后迭代其项。

【讨论】：

@Amna.Naveed 您如何建议以表格格式实现它？你能举个例子吗？