почему моя angular таблица данных не показывает данные?

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>

Я много искал и пробовал найти решение,

, поэтому я использую datatable для angular, и, похоже, он не работает. что мне делать.

пожалуйста, помогите мне, мой дедлайн скоро.

Answer 1

А, ладно! =) Используйте это для локального теста https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino Но проблема в API, вам нужен ключ. Это ваше API? Спросите у администратора API получить APIKey =) Когда у вас есть apikey, настраивайте httpheaders по запросу на .ts fille, как это

...
   
 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) => {

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-l oop. А также не забудьте реализовать OnDestroy .

Answer 3

Пожалуйста, посмотрите HttpErrorResponse? Если вы используете httpErrorResponse, проблема в API, который получил ie request =) Обычно для связи с API publi c (или нет) вам нужен ключ. Я не вижу конфигурации httpHeaders, содержащей ключ.

Answer 4

В этой части: this.http .post<DataTablesResponse>( 'http://192.168.2.81:8084/api/Public/Agent/List', dataTablesParameters, {} ).subscribe(resp => { this.persons = resp.data; попробуйте вставить console.log( resp); после this.persons = resp.data; и откройте консоль и посмотрите, являются ли они данными.

В вашем HTML попробуйте заменить {{person.Name}} пользователю {{person [0]}} и посмотрел, являются ли они данными на вашем сайте.

=)