如何从 ng2 智能表中的 API 获取数据？

Question

我有一个使用 Ng2 智能表的 Angular 应用程序，需要从 API 获取数据我创建了一个从 API 获取数据的方法（但我不知道它是否有效），主要问题是如何获取数据显示在 ng2 智能表中 以下是我的 HTML 代码

 <div class="mainTbl">
            <ng2-smart-table [settings]="settMain" [source]="dataMain"></ng2-smart-table>
        </div>

我的服务.ts

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

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

  constructor(private http:HttpClient) { }

  getAllClients(){
    this.http.get(this.url).toPromise().then(
      res=>{
        this.clients = res as Clients[];
      }
    )

  }
}

组件 .ts ：

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

  ];
  // end main stores tbl

  private myForm: FormGroup;

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


  ngOnInit() {

    this.Service.getAllClients();

  }

所以我需要一些帮助来获取数据以及如何在组件 .ts dataMain 数组中获取数据，在此先感谢并原谅我，因为我是初学者。

Answer 1

您的 html 模板中的[source]="dataMain" 需要设置为您从 API 获取的任何数组。

我假设您希望您的客户数据显示为函数

getClientData() 似乎正在返回一个客户端数组：

 getAllClients(){
    this.clients = this.http.get(this.url).toPromise().then(
      res=>{
        // you assigned the array to the value this.clients below
        this.clients = res as Clients[];
      }
    )

  }

您的 HTML 设置应该有 [source]="this.clients" 而不是 dataMain，因为 this.clients 是保存您要显示的列表的变量。

Answer 2

public getclients():Observable { 返回 this.http.get(this.url) 。管道（ //catchError(this.handleError('getclients', []))

  // catchError(this.handleError)
 );
   

}