Question

我有一个使用Ng2智能表的角度应用程序，需要从API提取数据我有一个问题，我很困惑，需要帮助来理解这些步骤这是我的代码 clints组件.ts

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 = {
   actions: {
     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: 'ملاحظات'
     }
   }
 }; 
 dataMain = [
   {
     id:"",
     name: "",
     phone:"",
     address: "",
     notes: "",
   }

 ];


 private myForm: FormGroup;

 constructor(private formBuilder: FormBuilder) { }


 ngOnInit() {


 }

我为客户端创建服务

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

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

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

 constructor(private http:HttpClient) { }


}

这是HTML

<div>
   <h2><i class="fa fa-box"></i>قائمة العملاء</h2>
   <div class="clintListTbl">
       <div class="export">
           <button class="btn btn-info"><i class="fa fa-print"></i>طباعة</button>
           <button class="btn btn-success"><i class="fa fa-file-excel"></i>تصدير</button>
       </div>
       <div class="mainTbl">
           <ng2-smart-table [settings]="settMain" [source]="dataMain"></ng2-smart-table>
       </div>
   </div> <!-- end main stores tbl-->
</div>

所以我需要一些帮助来理解，因为我查看了许多视频和文章，但我仍然感到困惑，在此先感谢您，因为我是一个初学者，请原谅。

ng2智能表从API提取数据

0 个答案: