angular - Angular Material 表中的内联编辑

Question

我有一个可以进行内联编辑的角度材料表。当我将它与后端 API 集成时，数据会在后端更新，但不会更新表中的值。任何帮助将不胜感激，因为我是角度新手。

编辑-member.ts：

import { MemberService } from './../../Services/member.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { Observable } from 'rxjs';
import { Member } from 'src/app/Models/member';
import { DialogueComponent } from './dialogue/dialogue.component';
import { MatDialog } from '@angular/material/dialog';
@Component({
  selector: 'app-edit-member',
  templateUrl: './edit-member.component.html',
  styleUrls: ['./edit-member.component.css']
})
export class EditMemberComponent implements OnInit {

  members!: Observable<Member[]>;
  member!: Member[];
  displayedColumns: string[] = ['userId', 'userName', 'emailId', 'profession', 'membershipStatus', 'expirationDate', 'action'];
  dataSource!: MatTableDataSource<Member[]>;
  isEdit!: boolean;

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatTable,{static:true}) table!: MatTable<any>



  constructor(private service: MemberService, public dialogue: MatDialog) { }

  reloadData() {
    this.service.getAllMembersFromRemote().subscribe((data: any[]) => {
    console.log(data);
    this.dataSource.data= data;
    return data;
    });
}

openDialogue(action: any,obj: any) {
  obj.action = action;
  const dialogRef = this.dialogue.open(DialogueComponent, {
    width: '250px',
    data:obj
  });

  
  dialogRef.afterClosed().subscribe(result => {
    if(result.event == 'Update'){
      this.updateRowData(result.data);
    }
  }
  )
}

updateRowData(row_obj: any){
   this.service.updateMemberFromRemote(row_obj.userId, row_obj).subscribe((res: any)=>{
    if(res.userId == row_obj.userId){
      res.userName = row_obj.userName;
      res.emailId = row_obj.emailId;
      res.profession = row_obj.profession;
      res.membershipStatus = row_obj.membershipStatus;
      res.expirationDate = row_obj.expirationDate;
    }
    return true;
  });
}

applyFilter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value;
  this.dataSource.filter = filterValue.trim().toLowerCase();
}

ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
}

 

  ngOnInit(): void {
    this.dataSource = new MatTableDataSource();
    this.reloadData();
   
  }
}

编辑-member.html：

<h2>Edit Members</h2>
<div class="search">
  <mat-form-field appearance="standard">
  <input matInput (keyup)="applyFilter($event)" placeholder="Search" #input>
  </mat-form-field>
</div>


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

  <ng-container matColumnDef="userId">
    <th mat-header-cell *matHeaderCellDef> User ID </th>
    <td mat-cell *matCellDef="let member"> {{member.userId}} </td>
  </ng-container>
  <ng-container matColumnDef="userName">
    <th mat-header-cell *matHeaderCellDef> User Name </th>
    <td mat-cell *matCellDef="let member"> {{member.userName}} </td>
  </ng-container>

  <ng-container matColumnDef="emailId">
    <th mat-header-cell *matHeaderCellDef> Email ID </th>
    <td mat-cell *matCellDef="let member"> {{member.emailId}} </td>
  </ng-container>

  <ng-container matColumnDef="profession">
    <th mat-header-cell *matHeaderCellDef> Profession </th>
    <td mat-cell *matCellDef="let member"> {{member.profession}} </td>
  </ng-container>

  <ng-container matColumnDef="membershipStatus">
    <th mat-header-cell *matHeaderCellDef> Membership Status </th>
    <td mat-cell *matCellDef="let member"> {{member.membershipStatus}} </td>
  </ng-container>
  <ng-container matColumnDef="expirationDate">
    <th mat-header-cell *matHeaderCellDef> Expiration Date </th>
    <td mat-cell *matCellDef="let member"> {{member.expirationDate}} </td>
  </ng-container>
  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef> Action </th>
    <td mat-cell *matCellDef="let member"> 
      <mat-icon class="edit-option" (click)="openDialogue('Update', member)">edit</mat-icon>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="paginator">
  <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>
</div>

对话.ts：

import { Component, Inject, OnInit, Optional } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Member } from 'src/app/Models/member';

@Component({
  selector: 'app-dialogue',
  templateUrl: './dialogue.component.html',
  styleUrls: ['./dialogue.component.css']
})
export class DialogueComponent implements OnInit {

  action!:string;
  local_data:Member;
  constructor(public dialogRef: MatDialogRef<DialogueComponent>, @Optional() @Inject(MAT_DIALOG_DATA) public member: Member) { 
    console.log(member);
    this.local_data = {...member};
    this.action = this.local_data.action;
  }

  ngOnInit(): void {
  }

  doAction(){
    this.dialogRef.close({event:this.action,data:this.local_data});
  }

  closeDialog(){
    this.dialogRef.close({event:'Cancel'});
  }

}

对话.html：

<h1 mat-dialog-title>{{action}}</h1>
<div mat-dialog-content>
  <mat-form-field *ngIf="action != 'Delete'; else elseTemplate">
    <input placeholder="{{action}} User Name" matInput [(ngModel)]="local_data.userName">
  </mat-form-field>
  <mat-form-field *ngIf="action != 'Delete'; else elseTemplate">
    <input placeholder="{{action}} Email ID" matInput [(ngModel)]="local_data.emailId">
  </mat-form-field>
  <mat-form-field *ngIf="action != 'Delete'; else elseTemplate">
    <input placeholder="{{action}} Profession" matInput [(ngModel)]="local_data.profession">
  </mat-form-field>
  <mat-form-field *ngIf="action != 'Delete'; else elseTemplate">
    <input placeholder="{{action}} Membership Status" matInput [(ngModel)]="local_data.membershipStatus">
  </mat-form-field>
  <mat-form-field *ngIf="action != 'Delete'; else elseTemplate">
    <input placeholder="{{action}} Expiration Date" matInput [(ngModel)]="local_data.expirationDate">
  </mat-form-field>
  <ng-template #elseTemplate>
    Sure to delete <b>{{local_data.userName}}</b>?
  </ng-template>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="doAction()">{{action}}</button>
  <button mat-button (click)="closeDialog()" mat-flat-button color="primary">Cancel</button>
</div>

member.service.ts：

import { Member } from './../Models/member';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MemberService {

  member!: any;

  constructor(private http: HttpClient) { }

  public getAllMembersFromRemote(): Observable<any[]> {
    return this.http.get<any[]>("http://localhost:8080/users")
  }

  public addMemberFromRemote(member: Member): Observable<any> {
    return this.http.post<any>("http://localhost:8080/user", member)
  }

  public updateMemberFromRemote(userId:number, member: Member): Observable<any[]> {
    return this.http.put<any>("http://localhost:8080/user/" +userId, member)
  }

}

标签： angulartypescriptservicedialogangular8