我是新手。我正在使用角度CLI 8.1.0。我在sql表中有用户列表,每个用户都有“状态”列。我通过其余api和php mysql在mat表上列出了用户列表。单击任何记录后,它的相应详细信息将在url参数的帮助下显示在新页面上。现在,我在新页面上有2个按钮“批准”和“拒绝”。当我单击“批准”时,该用户的状态列应从“待处理”更改为“批准”(与拒绝相同)。我的后端代码在邮递员上工作正常。但无法在角度上实现
approve.component.html
<button mat-stroked-button class="b1" (click)="approve()">Approve</button>
<button mat-stroked-button class="b2" (click)="reject()">Reject</button>
approve.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { ApiService } from 'src/app/api.service';
@Component({
selector: 'app-approval',
templateUrl: './approval.component.html',
styleUrls: ['./approval.component.css']
})
export class ApprovalComponent implements OnInit {
constructor(private activatedRoute:ActivatedRoute,private apiService:ApiService,private router:Router) { }
id:any;
result:any;
ngOnInit()
{
this.id=this.activatedRoute.snapshot.paramMap.get('id');
//console.log(this.id);
this.activatedRoute.queryParamMap.subscribe((queryParams:Params)=>{
let vendorId=this.id;
this.apiService.getVendorById(vendorId)
.subscribe(data=>{
this.result = data[0];
});
});
}
approve()
{
this.router.navigate(["/home/vendor-action"]);
}
reject()
{
this.router.navigate(["/home/vendor-action"]);
}
}
api.service.ts
import { Injectable, Output,EventEmitter } from '@angular/core';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { Users } from './users';
import { Observable } from 'rxjs';
import { Displayvendor } from './adminpanel/home/vendor-action/displayvendor';
@Injectable({
providedIn: 'root'
})
export class ApiService {
redirectUrl:string;
baseUrl:string="http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php";
@Output() getLoggedInName: EventEmitter<any> = new EventEmitter();
private static URL = 'http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php';
constructor(private httpClient : HttpClient) { }
getVendorById(data)
{
return this.httpClient.get('http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php?id='+data);
}
updateById(data)
{
return this.httpClient.get('http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php?id='+data);
}
}
index.php
<?php
$conn=mysqli_connect("localhost","root","root","angdb");
$request=$_SERVER['REQUEST_METHOD'];
$data=array();
switch($request)
{
case 'GET':
response(getData());
break;
case 'PUT':
response(updateData());
default:
#code...
break;
}
function getData()
{
global $conn;
if(@$_GET['id'])
{
@$id=$_GET['id'];
$where="AND id=".$id;
}
else
{
$id=0;
$where="";
}
$query=mysqli_query($conn,"select * from vendor where status='pending' ".$where);
while($row=mysqli_fetch_assoc($query))
{
$data[]=array("id"=>$row['id'],"changeColumn"=>$row['changeColumn'],"type"=>$row['type'],"timestamp"=>$row['timestamp'],"status"=>$row['status'],"name"=>$row['name']);
}
return $data;
}
function updateData()
{
global $conn;
parse_str(file_get_contents('php://input'),$_PUT);
if(@$_GET['id'])
{
@$id=$_GET['id'];
$where="where id=".$id;
}
else
{
$id=0;
$where="";
}
$query=mysqli_query($conn,"update vendor set status='".$_PUT['status']."'".$where);
if($query==true)
{
$data[]=array("Message"=>"Updated");
}
else
{
$data[]=array("Message"=>"Not updated");
}
return $data;
}
function response($data)
{
echo json_encode($data);
}
?>
答案 0 :(得分:0)
问题是您没有向后端传递任何数据,也没有在服务器上调用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
方法以允许支付费用。
答案 1 :(得分:0)
对于两种方法批准和拒绝,您都应通过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 } } )
}