[英]How to access id which is coming from API response and should be used to pass as parameter for deleteApp API
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在 getcmsApps() function 中,第一个控制台语句返回 api 响应,但是当第二个控制台语句像这样返回时
res[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] res[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象]
I need to pass app id inside deleteAppById(APPID) inside deleteApp() function.我需要在 deleteApp() function 内的 deleteAppById(APPID) 内传递应用程序 ID。
Service.Ts file服务.ts文件
@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.
Looks like deleteAppId()
can only accept one id
at a time.看起来
deleteAppId()
一次只能接受一个id
。 So lets take id of an object from array of this.data
and pass it along.因此,让我们从
this.data
数组中获取 object 的 id 并将其传递。
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);
});
}
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.要在控制台中直接打印您的数据,请将此行
console.log("res"+this.data)
更改为console.log("res", this.data)
- 这将正确打印您的数据。
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?其次,您的问题并不清楚,但是您可能正在使用 *ngFor 正确地在某种列表或表格中呈现“数据”? 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:然后,假设您使用
app
作为 *ngFor 局部变量,在每个呈现的应用程序项目上您应该放置一个(click)
处理程序,如下所示:
<ul>
<li *ngFor="let app of data" (click)="deleteAppById(app.id)">{{app.name}}</li>
</ul>
In .ts
, define a function for delete like this:在
.ts
中,定义一个 function 用于删除,如下所示:
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.这样,当您单击应用程序名称时,将调用您的删除 function。 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!我希望这个对你有用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.