angular - 单击垫表行后如何在新页面上显示所有其他详细信息
问题描述
我正在使用 Angular CLI 8.1.0。我在 MySQL 中有一个超过 10 列的表。在我的“vendor-action.html”页面上,我只是通过 PHP MySQL 的 REST API 获取 5 列。现在我希望在单击特定行后,该行的剩余 15 列详细信息应以键值格式显示在新页面“批准”上。我可以在我的第一页控制台上控制台单击行的 ID。现在如何通过 PHP MySQL 和 Angular 在新页面上显示该行的剩余详细信息?
在这里我附上我的源代码:
供应商-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>
供应商-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);
}
}
索引.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);
}
?>
解决方案
首先尝试获取该特定记录的 id。然后在您的服务中制作方法
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}}
推荐阅读
- javascript - 如何从节点 cli 应用程序中创建新的全局符号链接或命令?
- c++ - 当类型是未知模板参数时使用原始指针
- java - 尝试使用资源,如果未捕获抛出的异常,资源是否会清理?
- nginx - K8s 通过 FQDN 进行服务间通信
- r - 在 Rshiny 中使用水平滚动过滤 DT 数据表问题
- php - 我的 Laravel 导出 Excel 功能不起作用
- maven - 如何使用 jib 和 maven 将映像部署到 Kubernetes
- c - ebpf 的受限 C 中不允许什么?
- image - 提交新图像后如何保留露天容器修改?
- django - 将用户名从 django 登录传递到角度导航栏