为什么我的 angular 数据 table 没有显示数据？

Question

所以我的 angular 应用程序没有显示任何数据，但肯定有很多数据要显示。

application.component.ts

import { HttpClient, HttpResponse } from '@angular/common/http';

import { CommonService } from 'src/app/common.service';

class Person {
  Name: string;
  ContactName: string;
  Phone: Number;
  Email: string;
  Type: string;
  Country: string;
  Status: string;
}

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}


@Component({
  selector: 'app-applicants',
  templateUrl: './applicants.component.html',
  styleUrls: ['./applicants.component.less']
})
export class ApplicantsComponent implements OnInit {
  dtOptions: DataTables.Settings = {};
  persons: Person[];

  constructor(private http: HttpClient, public commonservice: CommonService) {}

  ngOnInit(): void {

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2,
      
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        this.http
          .post<DataTablesResponse>(
            'http://192.168.2.81:8084/api/Public/Agent/List',
            dataTablesParameters, {}
          ).subscribe(resp => {
            this.persons = resp.data;

            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [{ data: 'Name' }, 
                { data: 'ContactName' }, 
                { data: 'Phone' }, 
                { data: 'Email' }, 
                { data: 'Type' }, 
                { data: 'Country' }, 
                { data: 'Status' }]
    };
  }
}

application.component.html

<div class="topnav">
    <div class="container">
        <div id="fmhacaLogo" class="text-center">
            <img src="assets/images/FDRE.png" alt="logo">
            <span lang="am">የኢትዮጵያ የምግብ፣ የመድኃኒት እና የጤና ክብካቤ አስተዳደርና ቁጥጥር ባለስልጣን</span>
            <br>
            <span>Food, Medicine and Health Care Administration and Control Authority of Ethiopia</span>
        </div>
   <a routerLink="/login" routerLinkActive="active">LOGIN</a>
    <a routerLink="/contact-us" routerLinkActive="active">CONTACT US</a>
    <a routerLink="/about-us" routerLinkActive="active">ABOUT US</a>
    <a routerLink="/applicants" routerLinkActive="active">APPLICANTS</a>
    <div class="dropdown">
        <button class="dropbtn">PRODUCTION
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a routerLink="/registration" routerLinkActive="active">REGSTRATION</a>
          <a href="#">REGISTERED</a>
          <a href="#">SUSPENDED</a>
          <a href="#">CANCELLED</a>
          
        </div>
    </div>
    <a class="active" routerLink="/home" routerLinkActive="active">HOME</a>
  </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <div class="navy-line"></div>
        <h1>Applicants</h1>
      </div>
  
      <div class="ibox-content">
        <div class="table-responsive">
          <table datatable [dtOptions]="dtOptions" class="row-border hover">
            <thead>
              <tr>
                <th>Name</th>
                <th>Contact Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Type</th>
                <th>Country</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody *ngIf="persons?.length != 0">
                <tr *ngFor="let person of persons">
                    <td>{{ person.Name }}</td>
                    <td>{{ person.ContactName }}</td>
                    <td>{{ person.Phone }}</td>
                    <td>{{ person.Email }}</td>
                    <td>{{ person.Type }}</td>
                    <td>{{ person.Country }}</td>
                    <td>{{ person.Status }}</td>
                </tr>
            </tbody>
            <tbody *ngIf="persons?.length == 0">
              <tr>
                <td colspan="3" class="no-data-available">No data!</td>
              </tr>
            <tbody>
            </table>
        </div>
      </div>
    </div>
  </div>

我一直在寻找并尝试很多解决方案，

所以我正在使用 angular 的数据表，它似乎不起作用。我该怎么办

请帮助我，我的截止日期很快。

Answer 1

在这部分： this.http .post<DataTablesResponse>( 'http://192.168.2.81:8084/api/Public/Agent/List', dataTablesParameters, {} ).subscribe(resp => { this.persons = resp.data; 尝试在 this.persons = resp.data; 之后插入 console.log( resp); 并打开控制台并查看它们是否是数据。

在您的 HTML 中尝试将 {{ person.Name }} 替换为 {{ person[0] }} 并查看它们是否是您网站中的数据。

=)

Answer 2

试试这个。

html

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">

ts

export class AngularWayComponent implements OnDestroy, OnInit {

  dtOptions: DataTables.Settings = {};
  persons: Person[] = [];
  dtTrigger: Subject = new Subject();

  constructor(private http: Http) { }

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };

  getData() {
    this.yourService.getDataYouWant().subscribe((res) => {

      //console.log(res);
       this.persons = res.data;

        //after bind the data you need to trigger this method
        this.dtTrigger.next();
    });
  }


  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();
  }

}

确保数据来自服务器并使用 for-loop 正确绑定到 table。也不要忘记实施 OnDestroy.

Answer 3

你能看到 HttpErrorResponse 吗？如果您是 httpErrorResponse，问题出在接收请求的 API =) 通常要与 public API（或不）进行通信，您需要一个密钥。我没有看到包含密钥的 httpHeaders 配置。

Answer 4

好的！ =) 将其用于本地测试 https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino 但是问题在API，你需要钥匙。是你的 API 吗？请管理员 API 获取 APIKey =) 当你有 apikey 时，像这样在 .ts 文件上根据请求配置 httpheaders

...
   
 const httpOptions = {
    headers: new HttpHeaders({
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/json'

//configuration httpOptions can be defined by admin API
    })
  };

this.httpClient
  .get<any[]>(url, headers: headers /)
  .subscribe(
    (response) => {

为什么我的 angular 数据 table 没有显示数据？

why isn't my angular Data table isn't showing data?

angular-material

angular-datatables

angular