Angular12 get API 使 table 数据不显示

Question

所以我正在尝试制作一个 table 对 API 中的每个数据使用 ngFor。我尝试了 Youtube 视频中的教程，效果很好。现在我正在尝试使用给我的 API，但问题是数据没有出现在 table

<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <!-- TABLE: LATEST ORDERS -->
        <div class="card">
          <div class="card-header border-transparent">
            <h3 class="card-title">Latest Orders</h3>

            <div class="card-tools">
              <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
              </button>
              <button type="button" class="btn btn-tool" data-card-widget="remove">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table m-0">
                <thead>
                <tr>
                  <th>Order ID</th>
                  <th>Item</th>
                  <th>Status</th>
                  <th>Popularity</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td><a href="pages/examples/invoice.html">OR9842</a></td>
                  <td>Call of Duty IV</td>
                  <td><span class="badge badge-success">Shipped</span></td>
                  <td>
                    <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
                  </td>
                </tr>
                <tr *ngFor="let campaign of campaigns | async">
                  <td><a href="pages/examples/invoice.html">{{campaign.id}}</a></td>
                  <td>{{campaign.name}}</td>
                  <td><span class="badge badge-warning">Pending</span></td>
                  <td>
                    <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
                  </td>
                </tr>
                
                </tbody>
              </table>
            </div>
            <!-- /.table-responsive -->
          </div>
          <!-- /.card-body -->
          <div class="card-footer clearfix">

          </div>
          <!-- /.card-footer -->
        </div>
        <!-- /.card -->
      </div>
      <!-- /.col -->
    </div> <!-- /.row -->

campaign.component.ts

import { Component, OnInit } from '@angular/core';
import { GetServiceService } from '../get-service.service';

@Component({
  selector: 'app-campaign',
  templateUrl: './campaign.component.html',
  styleUrls: ['./campaign.component.css']
})
export class CampaignComponent implements OnInit {
  campaigns;
  constructor(
    private campaignService: GetServiceService,
  ) { }

  ngOnInit(): void {
    this.campaigns = this.campaignService.getCampaign();
  }

}

get-service.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class GetServiceService {

  constructor(
    private http: HttpClient
  ) { }

  getCampaign(){
    return this.http.get('https://emaillead.aturtoko.id/api/v1/campaign')
  }
}

所以我的期望是这段代码会给出我的 API 中的数据列表（忽略第一个）。实际发生的是 table 仅显示第一个，这意味着数据未显示在 table.

上

控制台中的错误是

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:3184)
    at callHook (core.js:2536)
    at callHooks (core.js:2495)
    at executeCheckHooks (core.js:2427)
    at refreshView (core.js:9474)
    at refreshComponent (core.js:10636)
    at refreshChildComponents (core.js:9261)
    at refreshView (core.js:9515)
    at refreshEmbeddedViews (core.js:10590)
    at refreshView (core.js:9489)

postman获取的api中的数据是

{
    "success": true,
    "message": "success",
    "data": [
        {
            "id": 1,
            "name": "buattoko"
        },
        {
            "id": 2,
            "name": "omnipos"
        },
        {
            "id": 3,
            "name": "pluscampaign"
        }
    ]
}

我需要做什么才能将数据发送到 table？

Answer 1

添加 pipe 和 map rxjs 运算符将结果转换为 response.data.

get-service.service.ts

import { map } from 'rxjs/operators';

getCampaign() {
  return this.http.get('https://emaillead.aturtoko.id/api/v1/campaign')
    .pipe(map((response: any) => response.data));
}

Sample Solution on StackBlitz

Angular12 get API 使 table 数据不显示

Angular12 get API making table data not showing

html

api

html-table

angular