Как показать все остальные детали на новой странице после нажатия на строку таблицы матов

Question

Я использую Angular CLI 8.1.0. У меня есть таблица в MySQL, которая имеет более 10 столбцов. На моей странице vendor-action. html я просто извлекаю 5 столбцов через REST API из PHP MySQL. Теперь я хочу, чтобы после нажатия на конкретную строку оставшиеся 15 столбцов детали этой строки отображались на новой странице «Утверждение» в формате ключ-значение. Я могу уточнить идентификатор строки, по которой щелкнули, на консоли моей первой страницы. Теперь, как я могу отобразить оставшиеся детали этой строки на новой странице через PHP MySQL и angular?

Здесь я прилагаю свой исходный код:

vendor-action.component. html

<div class="purchases-style">
    <div>
        <table mat-table [dataSource]="displayvendors" class="mat-elevation-z1">
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> Vendor ID </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <ng-container matColumnDef="changeColumn">
            <th mat-header-cell *matHeaderCellDef> Change Column </th>
            <td mat-cell *matCellDef="let element"> {{element.changeColumn}} </td>
        </ng-container>

        <ng-container matColumnDef="type">
            <th mat-header-cell *matHeaderCellDef> Change Type </th>
            <td mat-cell *matCellDef="let element"> {{element.type}} </td>
        </ng-container>

        <ng-container matColumnDef="timestamp">
            <th mat-header-cell *matHeaderCellDef> Timestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.timestamp}} </td>
        </ng-container>

        <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef> Status </th>
            <td mat-cell *matCellDef="let element"> {{element.status}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['id','changeColumn','type','timestamp','status']"></tr>
        <tr class="rowhover" (click)="displayData(row.id)" mat-row *matRowDef="let row; columns: ['id','changeColumn','type','timestamp','status']"></tr>
        </table>

         <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" class="mat-elevation-z1">
         </mat-paginator>
     </div>
     <router-outlet></router-outlet>
</div>

vendor-action.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource, MatPaginator} from '@angular/material';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

import { ApiService } from 'src/app/api.service';
import { Displayvendor } from './displayvendor';



@Component({
  selector: 'app-vendor-action',
  templateUrl: './vendor-action.component.html',
  styleUrls: ['./vendor-action.component.css']
})
export class VendorActionComponent {

  displayvendors : any
  constructor(private router:Router,public apiService:ApiService){}
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit()
  {
    this.apiService.userList().subscribe(displayvendors=> 
      {
        this.displayvendors=displayvendors; 
      });

  }

  displayData(id)
  {
    console.log(id);
    this.router.navigate(["/home/vendor-action/approval"]);
  }
}

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 {

  private static URL = 'http://localhost/repos/Sportaz-repo/angular_admin/php/index.php';
  constructor(private httpClient : HttpClient) { }  

  userList(): any
  {
    return this.httpClient.get(ApiService.URL); 
  }  
}

index. html

<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header("Content-Type: application/json; charset=UTF-8");
    $conn=mysqli_connect("localhost","root","vaamoz@15092018","angdb");

    $request=$_SERVER['REQUEST_METHOD'];

    $data=array();
    switch($request)
    {
        case 'GET':
            response(getData());
            break;

        default:
            #code...
            break;
    }

    function getData()
    {
        global $conn;
        $query=mysqli_query($conn,"select * from vendor where status='pending' ");
        while($row=mysqli_fetch_assoc($query))
        {
            $data[]=array("id"=>$row['id'],"changeColumn"=>$row['changeColumn'],"type"=>$row['type'],"timestamp"=>$row['timestamp'],"status"=>$row['status']);
        }
        return $data;
    }

    function response($data)
    {
        echo json_encode($data);
    }
?>

Answer 1

Сначала попытайтесь получить идентификатор этой конкретной записи. затем введите метод в вашем сервисе

getDataById(data) //get specific user data on approval page of vendor
  {
    return this.httpClient.get('http://localhost/repos/Sportaz-repo//php/index.php?id='+data);
  }

, затем внесите изменения в php, чтобы получить данные в соответствии с id

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

, теперь внесите изменения в ваш новый компонент

ngOnInit() 
  {
    this.id=this.activatedRoute.snapshot.paramMap.get('id');
    this.activatedRoute.queryParamMap.subscribe((queryParams:Params)=>{
      let vendorId=this.id;   

      this.apiService.getVendorById(vendorId)
      .subscribe(data=>{
        this.result = data[0];     
      });
    });
  }

на html странице

{{result?.name}}

Answer 2

У меня нет большого опыта работы с PHP, поэтому я отвечу на часть Angular, надеюсь, это поможет.

Прежде всего, когда вы позвоните displayData(row.id), вы должны сделать еще одна поездка на сервер для получения необходимой вам дополнительной информации.

из того, что я вижу здесь, вы просто переходите на локальный URL без нового параметра. Итак, если вам действительно нужно, чтобы пользователь полностью перешел на другую страницу, тогда ваш код должен выглядеть так:

displayData(id) {
   console.log(id);
   this.router.navigate(['/', 'home', 'vendor-action', 'approval', id]);
}

, при условии, что у вас есть конфигурация маршрутизации, такая как:

{ path: 'home/vendor-action/approval/:id', component: ApprovalComponent }

, тогда вы необходимо извлечь значение этого параметра из URL-адреса, а затем получить данные с сервера:

Approveponpon.ts

...
//inside the class
constructor(private route: ActivatedRoute) {}

id: any;
ngOnInit() {
   this.id = route.snapshot.paramMap.get('id');

   console.warn(`here is your id: ${this.id}`);

  // here you make the other trip to your server
}

или другой способ вызова самой службы изнутри вашего первого компонент и извлекать данные асинхронно без навигации:

displayData(id) {
   console.log(id);

  //calling api service here

  //then display it on the template conditionally if you want

  //you may also add a loader here if needed.
}

извините за длинный ответ, опять же, это в соответствии с вашим вопросом и тем, что я получил, может быть, я неправильно понял, вы можете просмотреть ответ и попросить больше, если это было неправильно или недостаточно.