时间戳

首页 > 解决方案 > 为什么我的角度数据表没有显示数据？

angular - 为什么我的角度数据表没有显示数据？

问题描述

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

应用程序.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>

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

所以我将数据表用于角度，它似乎不起作用。我该怎么办。

请帮帮我，我的截止日期快到了。

标签： angularangular-materialangular-datatables

解决方案

在这部分中： 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] }} 并查看它们是否是您网站中的数据。

=)

推荐阅读