Как обновить запись по нажатию кнопки для конкретного пользователя?

Question

Я новичок в angular. Я использую angular CLI 8.1.0. У меня есть список пользователей в моей таблице sql, и у каждого пользователя есть столбец «статус». Я перечислил список пользователей на матовой таблице через остальные API и php mysql. А после нажатия на любую запись на новой странице отображаются соответствующие детали с помощью параметра url. Теперь у меня есть две кнопки на моей новой странице «одобрить» и «отклонить». когда я нажимаю на утверждать, столбец состояния для этого пользователя должен измениться с «ожидающий» на «одобрить» (то же самое для отклонения). Мой бэкэнд-код отлично работает на почтальоне. Но не может достичь на angular

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);
    }
?>

Answer 1

для обоих методов одобрить и отклонить, вам следует вызвать службу API REST по идентификатору и новому статусу

, например

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 } }  )
}

Answer 2

Проблема в том, что вы не передаете какие-либо данные бэкэнду, а также не вызываете метод 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 службы, чтобы разрешить полезную нагрузку.