[英]How to fetch data from API in ng2 smart table?
I have an angular app using Ng2 smart table and need to fetch data from API I create a method to fetch data from API (but I didn't know it works or not ) and the main problem is how to get data to show in ng2 smart table Following is my HTML code我有一个使用 Ng2 智能表的 angular 应用程序,需要从 API 获取数据智能表 以下是我的 HTML 代码
<div class="mainTbl">
<ng2-smart-table [settings]="settMain" [source]="dataMain"></ng2-smart-table>
</div>
my service.ts我的服务.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[];
}
)
}
}
component.ts:组件.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();
}
so I need some help to get data and how to but it in component.ts dataMain array, thanks in advance and excuse me because I'm a beginner.所以我需要一些帮助来获取数据以及如何将其放入 component.ts dataMain 数组中,在此先感谢并原谅我,因为我是初学者。
[source]="dataMain" from your html template needs to be set to whatever Array you are fetching from the API. [source]="dataMain" 来自您的 html 模板需要设置为您从 API 获取的任何数组。
I'm assuming you want your Client data to show, as the function我假设您希望您的客户数据显示为 function
getClientData() appears to be returning an array of clients: 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[];
}
)
}
your HTML settings should have [source]="this.clients"
instead of dataMain, since this.clients is the variable that holds the list you want to show.您的 HTML 设置应该具有
[source]="this.clients"
而不是 dataMain,因为 this.clients 是保存您要显示的列表的变量。
public getclients():Observable<any[]> { return this.http.get<any[]>(this.url).pipe( //catchError(this.handleError<client[]>('getclients', [])) public getclients():Observable<any[]> { return this.http.get<any[]>(this.url).pipe( //catchError(this.handleError<client[]>('getclients', [] ))
// catchError(this.handleError)
);
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.