[英]How add and retrieve smart table data for Google cloud firestore
I'm engaging with an angular project.我正在参与一个有角度的项目。 I'm using visual studio code as the text editor.
我正在使用 visual studio 代码作为文本编辑器。 I used the
ng2-smart-table
as a table of my project as the manufacture
component.我使用
ng2-smart-table
作为我的项目的表作为manufacture
组件。 But I cannot understand how add data as well as retrieve data from firebase.但我无法理解如何添加数据以及如何从 firebase 检索数据。 anybody can help me.
任何人都可以帮助我。 As above mentioned.
如上所述。 i use the table template inside the
manufacture
component.我在
manufacture
组件中使用表格模板。
manufacture.component.ts制造.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ngx-manufacture',
styles:[],
template: `
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
`
})
export class ManufactureComponent implements OnInit {
constructor() { }
ngOnInit() {
}
settings = {
add: {
addButtonContent: '<i class="nb-plus"></i>',
createButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
},
edit: {
editButtonContent: '<i class="nb-edit"></i>',
saveButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
},
delete: {
deleteButtonContent: '<i class="nb-trash"></i>',
confirmDelete: true,
},
columns: {
id: {
title: 'ID'
},
name: {
title: 'Full Name'
},
username: {
title: 'User Name'
},
email: {
title: 'Email'
}
}
};
data = [
{
id: 1,
name: "Leanne Graham",
username: "Bret",
email: "Sincere@april.biz"
},
{
id: 2,
name: "Ervin Howell",
username: "Antonette",
email: "Shanna@melissa.tv"
},
{
id: 11,
name: "Nicholas DuBuque",
username: "Nicholas.Stanton",
email: "Rey.Padberg@rosamond.biz"
}
];
}
Then what should i do for this problem.那我该怎么做才能解决这个问题。
DataSource
DataSource
ng2-smart-table
uses DataSource
class to be fully operational in CRUD action. ng2-smart-table
使用DataSource
类在 CRUD 操作中完全运行。 It is quite easy if you dealing with local DataSource (since it was stored offline ): They provide LocalDataSource
class in which derived from their DataSource
.如果您处理本地数据源(因为它是离线存储的),这很容易:他们提供
LocalDataSource
类,其中派生自他们的DataSource
。 Your code will look like this.您的代码将如下所示。
import { Component, OnInit } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';
@Component({
selector: 'ngx-manufacture',
styles:[],
template: `
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
`
})
export class ManufactureComponent implements OnInit {
constructor() { }
ngOnInit() {
}
settings = {
add: {
addButtonContent: '<i class="nb-plus"></i>',
createButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
},
edit: {
editButtonContent: '<i class="nb-edit"></i>',
saveButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
},
delete: {
deleteButtonContent: '<i class="nb-trash"></i>',
confirmDelete: true,
},
columns: {
id: {
title: 'ID'
},
name: {
title: 'Full Name'
},
username: {
title: 'User Name'
},
email: {
title: 'Email'
}
}
};
data: LocalDataSource = new LocalDataSource();
constructor() {
this.data.load([
{
id: 1,
name: "Leanne Graham",
username: "Bret",
email: "Sincere@april.biz"
},
{
id: 2,
name: "Ervin Howell",
username: "Antonette",
email: "Shanna@melissa.tv"
},
{
id: 11,
name: "Nicholas DuBuque",
username: "Nicholas.Stanton",
email: "Rey.Padberg@rosamond.biz"
}
]);
}
}
I suggest you start from this to learn how you use LocalDataSource
.我建议您从这里开始学习如何使用
LocalDataSource
。
Now here's come the real deal.现在,真正的交易来了。
Last time, I was tasked to create an admin display using Angular, API backend server, and ng2-smart-table
.上次,我的任务是使用 Angular、API 后端服务器和
ng2-smart-table
创建一个管理显示。 I've managed it with LocalDataSource
, but then come the problem: This wasn't a local data source .我用
LocalDataSource
管理过它,但问题来了:这不是本地数据源。 After some furious night I found this , in which shows that they were two version on how they handling data: local
and server
.经过一个愤怒的夜晚后,我发现了这个,其中显示它们在处理数据方面有两个版本:
local
和server
。
This might hurt you a bit, but I found that you had to Create your own DataSource .这可能会对您造成一点伤害,但我发现您必须创建自己的 DataSource 。 An easy approach is by deriving from
LocalDataSource
.一种简单的方法是从
LocalDataSource
派生。 Your new DataSource
might look like this.您的新
DataSource
可能如下所示。
import { LocalDataSource } from 'ng2-smart-table';
export class CustomDataSource extends LocalDataSource {
constructor() { super(); }
doSomeDataFetchFromFirestoreAsync(): Promise<any[]> {
// Insert your data fetch flow here ...
}
doSomeAddFunctionToFirestoreAsync(element: any): Promise<any> {
// Insert your data addition flow here ...
}
doSomeDeleteFunctionToFirestoreAsync(): Promise<any> {
// Insert your data removal flow here ...
}
doSomeUpdateFunctionToFirestoreAsync(): Promise<any> {
// Insert your data update flow here ...
}
load(): Promise<any> {
// Do Some fetch from firestore as aync method, then (on completion) redirect back to LocalDataSource::load() method to maintain the chain
return doSomeDataFetchFromFirestoreAsync().then((preparedDataSet: any[]) => super.load(preparedDataSet));
}
add(element: any): Promise<any> {
// Do Some add function to firestore as aync method, then (on completion) redirect back to LocalDataSource::add() method to maintain the chain
return doSomeAddFunctionToFirestoreAsync(element).then((addedElement) => super.add(addedElement));
}
remove(element: any): Promise<any> {
// Same as load or add actually
return doSomeDeleteFunctionToFirestoreAsync(element).then(() => super.remove(element));
}
update(element: any, values: any): Promise<any> {
// This one is a little bit tricky: The DataSource will try find unchanged `element` first, then updates the value inside unchanged one with `values`
return doSomeUpdateFunctionToFirestoreAsync(element, values).then((editedElement) => super.update(element, editedElement));
}
}
And now, your code might look like this.现在,您的代码可能如下所示。
// ...
data: CustomDataSource = new CustomDataSource();
constructor() {
this.data.load();
}
// ...
}
This approach is the simple way I found based on ng2-smart-table
DataSource
definition.这种方法是我根据
ng2-smart-table
DataSource
定义找到的简单方法。 If you want to use ServerDataSource
instead, you can check this gist for a partial implementation of ServerDataSource
.如果您想改用
ServerDataSource
,可以查看此要点以了解ServerDataSource
的部分实现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.