我将ng2-smart-table
用作项目表。表格中有一个删除选项。我们可以临时删除数据。但是,如果我们再次刷新页面以加载数据,则会删除之前的内容。我想从表以及源数据列表中删除此数据。那我该怎么办。我在manufacture
组件中使用了此表。我已将此列表连接到Firebase。我可以从firebase中添加和检索数据,但是无法删除和更新,但方法正确,那我该怎么办。
manufacture.component.ts
import { Component, OnInit } from '@angular/core';
import { ManufactureService } from './manufacture.service';
import { Manufacture } from './manufacture.model';
@Component({
selector: 'ngx-manufacture',
styles: [],
template: `
<ng2-smart-table
(createConfirm)="addData($event)"
(deleteConfirm)="deleteData($event)"
[settings]="settings"
[source]="manu"
>
</ng2-smart-table>
`
})
export class ManufactureComponent implements OnInit {
manu: Manufacture[] = [];
constructor(private service: ManufactureService) {}
ngOnInit() {
this.service.getManufacture().subscribe(arr => {
let manu_list = arr.payload.get('manufact');
if (manu_list) {
this.manu = manu_list;
}
});
}
settings = {
add: {
addButtonContent: '<i class="nb-plus"></i>',
createButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
confirmCreate: true
},
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: {
shopname: {
title: 'Shop Name'
},
ownername: {
title: 'Owner Name'
},
nic: {
title: 'NIC'
},
contactno: {
title: 'ContactNo'
},
address: {
title: 'Address'
},
email: {
title: 'Email'
}
}
};
addData(data) {
this.manu.push(data.newData);
console.log(this.manu);
this.service.addManufacture({ manufact: this.manu }).subscribe(next => {
data.confirm.reject();
});
}
deleteData(event) {
if (window.confirm('Are you sure you want to Delete?')) {
event.confirm.resolve(event.newData);
} else {
event.confirm.reject();
}
}
}
manufacture.model.ts
export class Manufacture {
shopname : string;
ownername: string;
nic : string;
contactno: string;
address : string;
email : string;
}
manufacture.service.ts
import { Injectable } from '@angular/core';
import { Manufacture } from './manufacture.model';
import { AngularFirestore } from '@angular/fire/firestore';
import { from } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ManufactureService {
manufacture: Manufacture;
constructor(private firestore: AngularFirestore) {}
addManufacture(object) {
return from(
this.firestore
.collection('Manufacture')
.doc('manufacture')
.set(object)
);
}
getManufacture() {
return this.firestore
.collection('Manufacture')
.doc('manufacture')
.snapshotChanges();
}
deleteManufacture() {
this.firestore
.collection('Manufacture')
.doc('manufacture')
.delete();
}
}