Angular 如何为特定用户更新单击按钮后的记录？

我是新来的。我正在使用angular CLI 8.1.0。我的sql表中有用户列表，每个用户都有“状态”列。我通过RESTAPI和PHPMYSQL在mat表中列出了用户列表。点击任何一条记录后，在url参数的帮助下，其相应的详细信息将显示在新页面上。现在我的新页面上有两个按钮“批准”和“拒绝”。当我点击approve时，该用户的状态栏应该从“待定”更改为“批准”（与reject相同）。我的后端代码在postman上运行良好。但无法在角度上实现

approve.component.html

api.service.ts

从'@angular/core'导入{Injectable，Output，EventEmitter}；
从“rxjs/operators”导入{map}；
从'@angular/common/http'导入{HttpClient}；
从“/Users”导入{Users}；
从“rxjs”导入{Observable}；
从“./adminpanel/home/vendor action/Displayvendor”导入{Displayvendor}；
@注射的({
providedIn:'根'
})
出口级服务{
重定向URL：字符串；
baseUrl:string=”http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php";
@Output（）getLoggedInName:EventEmitter=新的EventEmitter（）；
私有静态URLhttp://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php';
构造函数（私有httpClient:httpClient）{}
getVendorById（数据）
{
返回此.httpClient.get（'http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php?id="数据",；
}
updateById（数据）
{
返回此.httpClient.get（'http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php?id="数据",；
}
}

index.php

---

问题是您没有向后端传递任何数据，也没有调用服务器上的PUT方法来更新状态

首先，修复组件，使其将正确的状态代码传递给服务，并在重定向到新页面之前等待操作完成。比如说,

async approve()
{
    await this.apiService.updateData(this.id, { status: 'Approve' });
    this.router.navigate([ "/home/vendor-action" ]);
}

async reject()
{
    await this.apiService.updateData(this.id, { status: 'Reject' });
    this.router.navigate([ "/home/vendor-action" ]);
}

其次，更新您服务的
updateData
方法以允许付费加载。
对于这两种方法，您应该通过id和新状态调用REST API服务

比如说

approve() {
    this.apiService.updateById(this.id, {status:'approve'})
    .subscribe((data:any)=> {
        if (data.Message == "Updated") { // check if the result is sucess then navigat to
            this.router.navigate(["/home/vendor-action"]);
        }
    });
}
reject() {
    this.apiService.updateById(this.id, {status:'reject'})
    .subscribe((data:any)=> {
        if (data.Message == "Updated") { // check if the result is sucess then navigat to
            this.router.navigate(["/home/vendor-action"]);
        }
    });
}

并将您的服务方法编辑为这样

updateById(id,payload)
 {
    let url = `http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php?id=${id}`
    return this.http.put(url, payload);
 }

或者您可以在php中将其作为参数接收

updateById(id,obj) {
    let url = `http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php?id=${id}`
    return this.httpClient.put(url, {}, {params: { status:obj.status } }  )
}

在approve方法上，需要1个参数，但得到2个。ts（2554）错误即将出现。当我删除“approve”时，如果条件“Property”result“在类型“Object”上不存在，则打开。ts（2339）“错误显示现在只有此错误显示Property”result“在类型“Object”上不存在。ts（2339）fir第一个错误，您必须更改方法
updateById
，以接受2个参数或仅传递一个参数作为对象。对于第二个错误，将
数据
更改为
（数据：任意）
，只有在导航前检查条件，并且如果不需要itconstructor，您可以忽略它（私有activatedRoute:activatedRoute，私有apiService:apiService，私有路由器：router）{}id:any；资料：有；结果：有；写了但仍然是相同的错误否，我是指可观察的数据参数，我更新了帖子，再次检查了未知的1个参数，但得到了2.ts（2554）错误显示
async approve()
{
    await this.apiService.updateData(this.id, { status: 'Approve' });
    this.router.navigate([ "/home/vendor-action" ]);
}

async reject()
{
    await this.apiService.updateData(this.id, { status: 'Reject' });
    this.router.navigate([ "/home/vendor-action" ]);
}

approve() {
    this.apiService.updateById(this.id, {status:'approve'})
    .subscribe((data:any)=> {
        if (data.Message == "Updated") { // check if the result is sucess then navigat to
            this.router.navigate(["/home/vendor-action"]);
        }
    });
}
reject() {
    this.apiService.updateById(this.id, {status:'reject'})
    .subscribe((data:any)=> {
        if (data.Message == "Updated") { // check if the result is sucess then navigat to
            this.router.navigate(["/home/vendor-action"]);
        }
    });
}

updateById(id,payload)
 {
    let url = `http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php?id=${id}`
    return this.http.put(url, payload);
 }

updateById(id,obj) {
    let url = `http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php?id=${id}`
    return this.httpClient.put(url, {}, {params: { status:obj.status } }  )
}