如何将数据从节点 Api 打印到 Angular 表。？打印数据时显示未定义的元素

Question

我正在尝试在角度表中打印数据，数据来自 JSON 格式的节点。但是，即使在控制台数据中打印 t 也显示未定义。 我也附上了 JSON 响应图片。

我正在使用 API 从 MongoDB 获取数据并使用 API 向 Angular 发送数据。数据即将到来，但问题是它没有在表中打印。

 <table class="table table-bordered table-striped ">
            <thead>
              <tr>
                <th>Username</th>
                <th>Date registered</th>
                <th>Role</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let x of data ">
                <td>{{x.serial}}</td>
                <td>2012/01/01</td>
                <td>Member</td>
                <td>
                  <span class="badge ba+dge-success">Active</span>
                </td>
              </tr>
            
            </tbody>
          </table>

来自 API 的 JSON 响应

{
code: 0,
message: "success",
data: {
labels: [
{
_id: "605b262c36c70c354015a945",
serial: "12345",
sourceApi: "ASDASD",
resultApi: "ASDASD",
labelApi: "ASDASD",
__v: 0
},
{
_id: "605b26bd36c70c354015a946",
serial: "3333",
sourceApi: "sdfdg",
resultApi: "sdsf",
labelApi: "gggg",
__v: 0
},
{
_id: "605b26ea2e5ea63080dd4796",
serial: "3333",
sourceApi: "sdfdg",
resultApi: "sdsf",[enter image description here][1]
labelApi: "gggg",
__v: 0
}
]
}
}

TS 文件代码

export class TablesComponent implements OnInit{
  public data?:any;
  constructor(private api:ApiServiceService) { 

    this.api.getDataApi().subscribe(data => {
      this.data = data;
    })
   

  }

 

  dtOptions: any = {}; 
  ngOnInit(){
  this.dtOptions = {
    "paging"  : true,
    "ordering": true,
    "info"    : true
  };

  }

Answer 1

您的 JSON 包含一些其他不需要填充数据的数据。

在您的 JSON 标签中包含一个对象数组，因此我们必须将其分配给“数据”变量

export class TablesComponent implements OnInit{
public data?:any;
constructor(private api:ApiServiceService) { 

this.api.getDataApi().subscribe(data => {
  this.data = data.data.labels;
})

}