首页 > 解决方案 > 如何解决“找不到不同的支持对象”

问题描述

我想从 mySql 表中显示日期。

我得到了从数据库实际表中获取的 api。

这是我的服务 (auth.service.ts)

getAliases(): any {
    this.loadToken();
    const headers = new HttpHeaders({
      Authorization: this.authToken,
      'Content-Type': 'application/json'
    });
    return this.http
      .get('http://localhost:8080/aliases/aliases', { headers: headers })
      .pipe(map(res => res));
  }

这是我的 aliases.js

router.get('/aliases', function (req, res) {
    con.query('SELECT * FROM virtual_aliases', function (error, results, fields) {
        if (error) throw error;
        return res.send({ error: false, data: results, message: 'aliasy.' });
    });
});

这是我的 component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'app/services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {
  aliases: any = {};

  constructor(private authService: AuthService, private router: Router) { }

  ngOnInit() {

    this.getAliases();
  }

   getAliases() {
    this.authService.getAliases().subscribe(
      res => {
        this.aliases = res;
        console.log(this.aliases);
      },
      err => console.error(err)
    );
  }
}

和我的 component.html

<table border='1' width='100%' style='border-collapse: collapse;'>
    <tr>
      <th>ID</th>
      <th>DOMAIN_ID</th>
      <th>SOURCE</th>
      <th>DESTINATION</th>

    </tr>

    <tr *ngFor="let aliases of aliases">
      <td>{{ id }}</td>
      <td>{{ domain_id }}</td>
      <td>{{ source }}</td>
      <td>{{ destination }}</td>
      <td>
      </td>
    </tr>
  </table>

我想显示我桌子上的所有东西。

我的 Api 的输出是 Json,例如:

{
  "error": false,
  "data": [
    {
      "id": 1,
      "domain_id": 1,
      "source": "test@testone.com",
      "destination": "dest@testone.com"
    },

并且控制台出现错误

DashboardComponent.html:7 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

标签: node.jsangular

解决方案


您需要访问响应的数据属性,它是一个数组,

this.aliases = res.data;

推荐阅读