Отображать извлеченные данные из API с помощью смарт-таблицы ng2

Question

Я пытаюсь использовать ng2-smart-table.Проблема в том, что я не знаю, как отобразить извлеченные данные из API в моем HTML.

Я генерирую 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();

  }

Есть ли ошибки в моем коде?И как я могу отобразить извлеченные данные?

Answer 1

Как я вижу, у вас нет данных о компоненте, вам нужно переместить обязательную часть на уровень компонента, а не на уровень обслуживания.

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;
 });