时间戳

首页 > 解决方案 > 使用 ng2 smart tbl 显示从 API 获取的数据

javascript - 使用 ng2 smart tbl 显示从 API 获取的数据

问题描述

我正在尝试使用ng2-smart-table. 问题是我不知道如何在我的 HTML 中显示从 API 获取的数据。

我生成model.ts 

export class Clients {
    id:number;
    name:string;
    phone:string;
    address:string;
    type:string;
    account:number;
    nots:string;
    branchId:number;
}

在我的service.ts我创建了一个从 API 获取数据的方法，如下所示：

import { Injectable } from '@angular/core';
import { Clients } from './clients.model';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

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

  url="http://localhost:21063/api/clints"
  clients:Clients[];

  constructor(private http:HttpClient) { }

  getAllClients(){
    this.http.get<Clients[]>(this.url).subscribe(
        data => {
          this.clients = data;
          console.log(this.clients);
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occurred.");
        } else {
          console.log("Server-side error occurred.");
        }
      });
    }

  }

我尝试以component.ts这种方式调用该方法“我不知道这是对还是错”：

import { Clients } from './../clients.model';
import { Component, OnInit } from '@angular/core';
import { IAngularMyDpOptions, IMyDateModel } from 'angular-mydatepicker';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ClientsService } from '../clients.service';

@Component({
  selector: 'app-client-info',
  templateUrl: './client-info.component.html',
  styleUrls: ['./client-info.component.css']
})
export class ClientInfoComponent implements OnInit {

  // start main stores tbl
  settMain = {
    noDataMessage: 'عفوا لا توجد بيانات',

    actions: {
      columnTitle: 'إجراءات',
      position: 'right',
    },
    pager: {
      perPage: 25,
    },
    add: {
      addButtonContent: '  إضافة جديد ',
      createButtonContent: '',
      cancelButtonContent: '',
    },
    edit: {
      editButtonContent: '',
      saveButtonContent: '',
      cancelButtonContent: '',


    },
    delete: {
      deleteButtonContent: '',
    },

    columns: {
      index: {
        title: 'مسلسل',
        width: '80px',
      },
      id: {
        title: 'كود العميل',
        width: '80px',
      },
      name: {
        title: 'اسم العميل',
        width: '160px'
      },
      phone: {
        title: ' الهاتف'
      },
      address: {
        title: ' العنوان'
      },
      nots: {
        title: 'ملاحظات'
      }
    }
  };
  data= [
    {
      index:1,
      id:"",
      name: "",
      phone:"",
      address: "",
      nots: "",
    }];

  private myForm: FormGroup;

  constructor(private formBuilder: FormBuilder,private Service:ClientsService) { }


  ngOnInit() {

    this.Service.getAllClients();

  }

我的代码有错误吗？以及如何显示获取的数据？

标签： javascriptangulartypescript

解决方案

正如我所见，您没有组件上的数据，您需要将绑定部分移动到组件级别，而不是服务级别。

service.ts

 getAllClients(){
    this.http.get<Clients[]>(this.url)
    .pipe(map((response : Response) => {
        return response;   
    }), catchError((error: Response) =>{
        return throwError('Something went wrong');      
    }), finalize(() => {

    }));
   }

如果您希望它执行，您必须订阅该呼叫。见HttpClient

 this.Service.getAllClients().subscribe((data)=>{
  this.clients = data;
 });

推荐阅读