I want to delete one clicked row from Firebase in my smart table. I am using Angular 4.
The smart table code:
<ng2-smart-table [settings]="settings" [source]="bicycleData"
(deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>
My constructor component code:
constructor(
db: AngularFireDatabase, ) {
this.bicyclesList = db.list('bicycle-list')
.snapshotChanges()
.map(changes => {
return changes.map(c => ({
key: c.payload.key,
...c.payload.val()
}))
});
this.bicyclesList.subscribe((data) => {
this.bicycleData = data;
});
}
and component.ts code:
settings = {
delete : {
deleteButtonContent: '<i class="nb-trash"></i>',
confirmDelete: true,
},
}
onDeleteConfirm() function and deleteEnquiry function in service:
onDeleteConfirm(event) {
console.log(event.data);
if (window.confirm('Are you sure you want to delete?')) {
this.deleteEnquiry(event.data);
event.confirm.resolve();
} else {
event.confirm.reject();
}
}
deleteEnquiry(data) {
console.log(data.$key);
this.db.list(`bicycle-list${data.$key}`).remove(data);
}
But it keeps showing me the following error in console:
ERROR TypeError: Cannot read property 'list' of undefined
How can I fix this error ?
Looks like an error in deleteEnquiry.
According to the docs is should be:
deleteEnquiry(data) {
console.log(data.$key);
this.db.list('bicycle-list').remove(data.$key);
}
Related
I have a rest-api-service with the following call to a REST method that returns a very complex JSON object in the body of its response. This code is from the rest-api-service.ts file.
getLocalObjectsFromREST(): Observable<LocalObjects> {
return this.http.get<LocalObjects>(this.apiURL + '/api/GetLocalObjects')
.pipe(
retry(1),
catchError(this.handleError)
)
}
handleError(error: { error: { message: string; }; status: any; message: any; }) {
let errorMessage = '';
if(error.error instanceof ErrorEvent) {
// Get client-side error
errorMessage = error.error.message;
} else {
// Get server-side error
errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
console.log(errorMessage);
return throwError(errorMessage);
}
I am attempting to grab that response in a component with the following that is in my app.component.ts file:
export class AppComponent implements OnInit {
_restApi: RestApiService | undefined;
_localObjects: LocalObjects | undefined;
contructor(restApi: RestApiService) {
this._restApi = restApi;
}
ngOnInit() {
this.getLocalObjectsFromService();
console.log("Main object has a name of: " + this._localObjects?.mainObject.objName)
console.log("Data Returned is " + this._localObjects);
}
getLocalObjectsFromService() {
return this._restApi?.getLocalObjectsFromREST().subscribe((data: {}) => {
this._localObjects = <LocalObjects> data;
})
}
}
I am receiving no errors and yet the console logs are showing undefined return values.
Can somebody please help me out?
ngOnInit() {
this.getLocalObjectsFromREST();
console.log("Main object has a name of: " + this._localObjects?.mainObject.objName)
console.log("Data Returned is " + this._localObjects);
}
getLocalObjectsFromService() {
return this._restApi?.getLocalObjectsFromREST().subscribe((data: {}) => {
this._localObjects = <LocalObjects> data;
})
}
In your ngOnInit() you are not calling your getLocalObjectsFromService() function and as you are not adding a subscribe() after getLocalObjectsFromREST you are not seeing any data...
I am trying to map some values of JSON response to another variable but getting some error "Cannot set property name of undefined"
export interface Data
{
description: any;
name : any;
}
Inside main class defined the following data
actionData : any;
action:Data[]=[];
getData()
{
this.spref.getNewData().subscribe(
response => {
this.actionData = response;
for(let i=0;i<this.actionData.length;i++)
{
this.action[i].name = this.actionData[i].name;
this.action[i].description = this.actionData[i].description;
}
})
},
error => {
console.log('Failure: ', error);
}
);
}
Response of actionData in this format
[{
description: "pqrs"
jsonType: "com.xyz.common.object.NewData"
name: "abc"
value: "xyz"
}]
I want action data will be stored in this format
[{
description: "pqrs"
name: "abc"
}]
Thanks in advance!
action[i] is undefined if not initialized. So, before setting any properties to it you need to initialize it, like so:
actionData : any;
action:Data[]=[];
getData()
{
this.spref.getNewData().subscribe(
response => {
this.actionData = response;
for(let i=0;i<this.actionData.length;i++)
{
this.action[i] = {
name: this.actionData[i].name;
description: this.actionData[i].description;
}
}
})
},
error => {
console.log('Failure: ', error);
}
);
}
From the docomuntation of ngx-Spinner said in FEAUTERS: "show()/hide() methods return promise",
but in my Project in intellij:
this.spinner.show() returns void.
ane therefore when im trying to do this:
onCheckOut() {
this.spinner.show().then(p => {
this.cartService.CheckoutFromCart(1);
});
}
im getting the : ERROR in src/app/components/checkout/checkout.component.ts:33:25 - error TS2339: Property 'then' does not exist on type 'void'.
33 this.spinner.show().then(p => {
how i make it work?
Maybe the documentation is wrong. When I look at the code, it does not return a promise:
show(name: string = PRIMARY_SPINNER, spinner?: Spinner) {
setTimeout(() => {
const showPromise = new Promise((resolve, _reject) => {
if (spinner && Object.keys(spinner).length) {
spinner['name'] = name;
this.spinnerObservable.next(new NgxSpinner({ ...spinner, show: true }));
resolve(true);
} else {
this.spinnerObservable.next(new NgxSpinner({ name, show: true }));
resolve(true);
}
});
return showPromise;
}, 10);
}
Not sure if this was done on purpose or not, but you could raise an issue on Github.
The only way to achieve your solution would be to use the getSpinner method of the service:
const spinnerName = "my-spinner";
this.spinner.show(spinnerName);
this.spinner.getSpinner(spinnerName)
.pipe(
first(({show}) => !!show)
)
.subscribe(() => {
this.cartService.CheckoutFromCart(1);
}
);
Upon visiting the component invoices.ts , it looks in the background for some updates and applies them to the existing ones. Otherwise when the user has no existing invoices, it will perform a POST request to create them. However, when the user visits the component the POST and PUT operations are called in the ngOnInit() , i still see an empty table untill I refresh the page. How do i automatically refresh the HTML table to fill the newly made invoices without using `window.location.reload()' ?
invoice.component.ts
ngOnInit() {
this.auth.getProfile().subscribe((profile : any) => {
this.userName = profile.user.username;
this.email = profile.user.email;
}
this.getAndUpdateInvoices();
}
getAndUpdateInvoices() {
this.invoiceService.getInvoicesn().subscribe((data : any) => {
this.invoices= data.invoice;
this.createUpdate();
})
createUpdate() {
this.createInvoice({
client: data.Client,
***etc
})
}
createInvoice(invoice) {
this.invoiceService.newInvoice(invoice).subscribe((data: any) => {
if (!data.success) {
console.log(data.message);
} else {
console.log(data.message);
}
});
}
this.invoiceService.updateInvoice(this.invoice).subscribe((data: any) => {
if (!data.success) {
console.log(data.message);
} else {
console.log(data.message);
}
});
}
In my invoice.component.html:
<tr *ngFor="let invoice of invoices" >
<td> {{invoice.hours}} </td>
Please let me know if you need more info
just call the method which is being used for fetching all the data from your service class here :
createInvoice(invoice) {
this.invoiceService.newInvoice(invoice).subscribe((data: any) => {
if (!data.success) {
console.log(data.message);
} else {
console.log(data.message);
-----HERE----
}
});
}
I'm trying to take a picture with the nativescript camera module and to run
the nativescript-ocr module (https://github.com/EddyVerbruggen/nativescript-ocr) on it .
Here is my code :
public saveToGallery: boolean = true;
public keepAspectRatio: boolean = true;
public width: number = 300;
public height: number = 300;
private ocr: OCR;
constructor() {
this.ocr = new OCR();
}
ngOnInit(): void {
}
onTakePhoto() {
let options = {
width: this.width,
height: this.height,
keepAspectRatio: this.keepAspectRatio,
saveToGallery: this.saveToGallery
};
takePicture(options).
then((imageAsset) => {
console.log("Result is an image asset instance");
let img: ImageSource = new ImageSource();
img.fromAsset(imageAsset).then((success) => {
if (success) {
this.ocr.retrieveText({
image: img,
whitelist: "ABCDEF",
blacklist: "0123456789",
onProgress: (percentage: number) => {
console.log(`Decoding progress: ${percentage}%`);
}
}).then(
(result: RetrieveTextResult) => {
console.log(`Result: ${result.text}`);
}, (error: string) => {
console.log(`Error: ${error}`);
})
}
});
}).catch((err) => {
console.log("Error -> " + err.message);
});
}
onRequestPermissions() {
requestPermissions();
}
}
Camera plugin works fine, takes and saves a picture, but when i'm running onTakePhoto i get this error message :
"Error in ocr.retrieveText: Error: java.lang.IllegalArgumentException: Data path does not exist!"
i'm not sure to use the .fromAsset the right way,
but i try a lot of thing to solve this problem
what i'm doing wrong?
Resolve : i didn't create corectly my tesseract/tessdata folder