Ts file
export class AppInfoComponent implements OnInit {
data: [] = [];
constructor(private getCmsService: GetCmsService, private router: Router, private deleteAppService: DeleteAppService) { }
ngOnInit(): void {
this.getcmsApps();
}
getcmsApps() {
this.getCmsService.getApps().subscribe((res: any) => {
this.data = res;
console.log(res)
console.log("res" this.data)
})
}
deleteApp(){
this.deleteAppService.deleteAppById(this.data).subscribe((res: any) => {
console.log(res)
})
}
Here in the getcmsApps() function first console statement is returing api response but when second console statement returns like this
res[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I need to pass app id inside deleteAppById(APPID) inside deleteApp() function.
Service.Ts file
@Injectable({ providedIn: 'root' })
export class GetCmsService {
constructor(private httpclient: HttpClient) { }
getApps() {
return this.httpclient.get(environment.url environment.cmsApp, {headers: {'Ocp-Apim-Subscription-Key':environment.OcpSubscriptionKey}
})
}
deleteAppById(appId: string) {
return this.httpclient.delete(environment.url environment.cmsApp appId, {headers: {'Ocp-Apim-Subscription-Key':environment.OcpSubscriptionKey}
})
}
}
This is the response
So here i need to get respective App id to pass inside deleteAppById(appId: string) {} function for deleting apps.
CodePudding user response:
Looks like deleteAppId()
can only accept one id
at a time. So lets take id of an object from array of this.data
and pass it along.
getcmsApps() {
this.getCmsService.getApps().subscribe((res: any) => {
this.data = res;
console.log(res);
console.log('res' this.data);
for (let item of this.data) {
if (item?.id) {
this.deleteApp(item.id);
}
}
});
}
deleteApp(id: string) {
this.deleteAppService.deleteAppById(id).subscribe((res: any) => {
console.log(res);
});
}
CodePudding user response:
To print out your data in the console directly change this line console.log("res" this.data)
to console.log("res", this.data)
- that will print your data correctly.
Secondly, this is not clear from your question, but you are probably rendering the "data" in some kind of list or table right, using *ngFor perhaps? right?
Then, with presumption that you use app
as the *ngFor local variable, on each rendered app item you should place a (click)
handler, something like this:
<ul>
<li *ngFor="let app of data" (click)="deleteAppById(app.id)">{{app.name}}</li>
</ul>
In .ts
, define a function for delete like this:
deleteAppById(appId: string): void {
this.deleteAppService.deleteAppById(appId)
.subscribe((res: any) => {
console.log(res);
//remove the deleted app item from the "data" array, or
//simply re-fetch it
}
That way, when you click on the app name, your delete function will be invoked. But the item will stay on screen if you don't re-fetch the "data" array afterwards, or simply remove the app from your array.
I hope that this helps!