0

这是我的 html 文件。

在 html 文件中有 2 个锚标记。一个用于编辑，另一个用于查看详细信息选项。两者都被重定向到其他编辑和查看组件。但相反，我想在 mat-dialog 弹出窗口上显示编辑和查看选项。请帮忙。


    <div class="mat-elevation-z8" >
        <table mat-table [dataSource]="dataSource" class="table">    

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

          <ng-container matColumnDef="Name">
            <th mat-header-cell *matHeaderCellDef> Name</th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
          </ng-container>
  
          <ng-container matColumnDef="Email">
            <th mat-header-cell *matHeaderCellDef> Email </th>
            <td mat-cell *matCellDef="let element"> {{element.email}} </td>
          </ng-container>

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

          <ng-container matColumnDef="Edit">
            <th mat-header-cell *matHeaderCellDef> Edit </th>
            <td mat-cell *matCellDef="let element">
                <a class="action-link" [routerLink]="['/users/edit',element.id]">
                    <mat-icon class="mat-icon">edit</mat-icon></a>  </td>
          </ng-container>

          <ng-container matColumnDef="View">
            <th mat-header-cell *matHeaderCellDef> View </th>
            <td mat-cell *matCellDef="let element"> 
                <a class="action-link" [routerLink]="['/users/view',element.id]">
                    <mat-icon class="mat-icon">visibility</mat-icon></a> </td>
          </ng-container>
          <!-- <button mat-raised-button (click)="openDialog()">Pick one</button> -->
          <tr mat-header-row class="columns" *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row  class="rows" *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </div>

      <mat-paginator
      [length]="totalLenght"
     [pageSize]="5"
     [pageSizeOptions]="[5, 10]"
     >
</mat-paginator>

这是我的 ts 文件

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { UserService } from 'src/app/services/user.service';
//import { MatDialog } from '@angular/material/dialog';\
import { MatDialogConfig } from '@angular/material/dialog';
@Component({
  selector: 'app-view-user',
  templateUrl: './view-user.component.html',
  styleUrls: ['./view-user.component.scss']
})
export class ViewUserComponent implements OnInit {
  @ViewChild(MatSort) sort = new MatSort(); 
  @ViewChild(MatPaginator) paginator?:MatPaginator;
  constructor(private userService:UserService) { }
  displayedColumns=["User Id", "Name", "Email","City","Edit","View"];
   listUsers:any=[];
   dataSource:any;
   totalLenght:number=0;;

  ngOnInit(): void {
    this.userService.listUsers().subscribe(data=>{
      this.listUsers=data;
     this.dataSource = new MatTableDataSource<any>(this.listUsers);
     this.dataSource.sort = this.sort;
     this.totalLenght=this.listUsers.length;
    this.dataSource.paginator = this.paginator;
    })   
  }
  openDialog(){

  }
}

这是应用程序路由模块中给出的路由，分别用于添加、编辑和查看用户详细信息。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddItemComponent } from './components/add-item/add-item.component';
import { ListGridComponent } from './components/list-grid/list-grid.component';
import { AddUserComponent } from './users/add-user/add-user.component';
import { EditUserComponent } from './users/edit-user/edit-user.component';
import { ViewUserComponent } from './users/view-user/view-user.component';
import { View1userComponent } from './users/view1user/view1user.component';
const routes: Routes = [
{
  path:'users',
  children:[
    {
      path:'list',component:ViewUserComponent
    },
  
    {
      path:'add',component:AddUserComponent
    },
    {
      path:'edit/:id',component:EditUserComponent
    },
    {
      path:'view/:id',component:View1userComponent
    }
  ]
},
{
    path:'',component:ViewUserComponent  
},

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

最后这是服务文件

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
 baseUrl="https://jsonplaceholder.cypress.io/"; 

  constructor(private http:HttpClient) {
   }
   listUsers(){
     return  this.http.get(this.baseUrl+ 'users');
  }
  addUser(userObj:any){
    return this.http.post(this.baseUrl+'users',userObj)
  }
  viewUser(id:any){
    return this.http.get(this.baseUrl+ 'users/' + id);
  }
  updateUser(id:any, userObj:any){
    return this.http.put(this.baseUrl+'users/'+id ,userObj)
  }
}
4

0 回答 0