0

我有一个在两个页面之间导航的小应用程序。一页有值表，并且在表的末尾有一个编辑按钮。单击行末尾的编辑按钮后，该行的值必须作为可编辑表单显示在另一个页面上，该表单已经填充了我使用 GET 使用 ID 的当前行的值。表格即将到来，但默认情况下不填写值。我使用 Angular 8 作为前端，使用 spring boot 作为后端。当我单击编辑按钮时，我在服务器端 Eclipse 控制台中收到如下消息：：无法将类型“java.lang.String”的值转换为所需类型“java.lang.Long”；嵌套异常是 java.lang.NumberFormatException：对于输入字符串：“未定义”。

成员.ts：

export class Member {

    userId!: number;
    userName!: string;
    emailId!: string;
    profession!: string;
    membershipStatus!: string;
    expirationDate!: Date;
    action!: any;

    constructor() {
        
    }
}

member.service.ts：

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

@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 getMemberFromRemote(userId:number): Observable<any> {
    return this.http.get<any>("http://localhost:8080/user/" +userId)
  }
  
  public updateMemberFromRemote(userId:number, member: Member): Observable<any> {
    return this.http.put<any>("http://localhost:8080/user/" +userId, member)
  }
}

将值列表作为表格的页面：

成员列表.ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { Member } from '../member';
import { MemberService } from '../member.service';
import {MatPaginator} from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table'
import { Router } from '@angular/router';


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

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

  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(private service: MemberService, private router: Router) { }

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

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


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

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

  memberDetails(userId: number){
    this.router.navigate(['update-member', userId]);
  }

  updateMember(userId: number){
    this.router.navigate(['update-member', userId]); 
  }

}

成员列表.html：

<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)="memberDetails(member.userId)">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 { MemberService } from './../member.service';
import { Member } from './../member';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NgForm } from '@angular/forms';


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

  userId!: number;
  member!: Member;

  constructor(private route: ActivatedRoute,private router: Router, private service: MemberService) { }

  ngOnInit(): void {
    this.member = new Member();

    this.userId = this.route.snapshot.params['userId'];
    
    this.service.getMemberFromRemote(this.userId)
      .subscribe(data => {
        console.log(data)
        this.member = data;
      }, error => console.log(error));
  }
  
  updateEmployee() {
    this.service.updateMemberFromRemote(this.userId, this.member)
      .subscribe(data => {
        console.log(data);
        this.member = new Member();
        this.gotoList();
      }, error => console.log(error));
  }

  onSubmit() {
    this.updateEmployee();    
  }

  gotoList() {
    this.router.navigate(['/']);
  }

}

更新成员.html：

<div class="jumbotron form-row">
<div class="col-md-4 col-md-offset-4">
<form (ngSubmit)="onSubmit()" style="width: 300px;">
  <div class="form-group">
    <label for="name">User Name</label>
    <input type="text" class="form-control form-control-sm" id="userName" required [(ngModel)]="member.userName"
      name="userName">
  </div>
  <div class="form-group">
    <label for="name">Profession</label>
    <input type="text" class="form-control form-control-sm" id="profession" required [(ngModel)]="member.profession"
      name="profession">
  </div>

  <div class="form-group">
    <label for="name">Email ID</label>
    <input type="email" class="form-control form-control-sm" id="emailId" required [(ngModel)]="member.emailId"
      name="emailId">
  </div>

  <div class="form-row">

    <div class="form-group col-md-6">
      <label for="name">Membership Status</label>
      <input type="text" class="form-control form-control-sm" id="membershipStatus" required
        [(ngModel)]="member.membershipStatus" name="membershipStatus">
    </div>
    <div class="form-group col-md-6">
      <label for="name">Expiration Date</label>
      <input type="text" class="form-control form-control-sm" id="expirationDate" required
        [(ngModel)]="member.expirationDate" name="expirationDate">
    </div>
  </div>
  <div style="margin-top: 10px;">
    <button type="submit" class="btn btn-primary" style="background-color: #3f51b5;">Submit</button>
  </div>
</form>
</div>

由于我是角度新手，有人可以指导我吗？

4

0 回答 0