core.js:4442 錯誤類型錯誤：無法讀取未定義的屬性“修剪”

Question

我在 Angular 節點 MySQL CRUD 應用程序中遇到“修剪”問題

core.js:4442 錯誤類型錯誤：無法在 AdmissionListComponent_Template_button_click_5_listener (admission-list.component.html:6) 處讀取 AdmissionListComponent.post (admission-list.component.ts:30) 處未定義的屬性“修剪”

這是 admission-list.component.ts：

import { Component, OnInit } from '@angular/core';

import { Observable } from 'rxjs';

import { ListCrudService } from 'src/app/services/list-crud.service';

import { Admission } from 'src/app/models/admission';

import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-admission-list',
  templateUrl: './admission-list.component.html',
  styleUrls: ['./admission-list.component.scss']
})
export class AdmissionListComponent implements OnInit {
admissions$: Observable<Admission[]>;


constructor(private ListCrudService: ListCrudService) {}

  ngOnInit(): void {
  this.admissions$ = this.fetchAll();
  }
  fetchAll(): Observable<Admission[]> {
    return this.ListCrudService.fetchAll();
  }

  post(newAdmission: Omit <Admission,'id'>): void {
const stu_name = (<string>newAdmission.stu_name).trim();
const stu_surname = (<string>newAdmission.stu_surname).trim();
const email = (<string>newAdmission.email).trim();


if (!stu_name || !stu_surname || !email) return;
console.log(stu_name);
console.log(stu_surname);
console.log(email);

this.admissions$ = this.ListCrudService
.post({ stu_name, stu_surname, email })
.pipe(tap((_) => (this.admissions$ = this.fetchAll())));
}

這是 admission-list.component.html：

<mat-toolbar style="color: secondary;">Admission</mat-toolbar>
<h1 style="text-align: center; font-weight: bold; font-size: larger;">List</h1>

<mat-card style="width: 75%; margin: auto;">
    
    <button (click)="post(admissionInput.value)"
   mat-fab
   color="secondary" 
   style="float: right;">
    <mat-icon>add</mat-icon>
</button>
<form name="myForm">
<mat-form-field>
 
<mat-label>Name</mat-label>
<input type="text" #admissionInput matInput placeholder="Enter name"/>
</mat-form-field>
<mat-form-field>
    
<mat-label>Surname</mat-label>
<input type="text" #admissionInput matInput placeholder="Enter surname"/>
</mat-form-field>
<mat-form-field>
  
<mat-label>Email</mat-label>
<input type="text" #admissionInput matInput placeholder="Enter email"/>
</mat-form-field>
</form>
    <mat-list>
        <mat-list-item *ngFor="let admission of admissions$ | async">
<span style="font-weight: 600;">
{{ admission.id }}.{{ admission.stu_name }} 
{{ admission.stu_surname }}-{{ admission.email }}</span>
 <span style="position: absolute; right: 0;">
        <button mat-icon-button>
<mat-icon (click)="update(admission.id, admissionInput.value)" color="primary">
    edit
</mat-icon>
        </button>
        <button mat-icon-button>
            <mat-icon (click)="delete(admission.id)" color="warn">
                delete
            </mat-icon>
                    </button>
    </span>

</mat-list-item>
    </mat-list>
</mat-card>

這是 list-crud.service.ts：

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

import { Observable } from 'rxjs';

import { catchError, tap } from 'rxjs/operators';

import { ErrorHandlerService } from './error-handler.service';

import { Admission } from '../models/admission';


@Injectable({
  providedIn: 'root'
})
export class ListCrudService {
private url = "http://localhost:3000/admission";

httpOptions: { headers: HttpHeaders } = {
  headers: new HttpHeaders({ "Content-Type": "application/json" }),
  };
  constructor(
     private errorHandelerService: ErrorHandlerService,
     private http: HttpClient ) {}
   
fetchAll(): Observable<Admission[]> {
  return this.http
  .get<Admission[]>(this.url, { responseType: 'json'})
  .pipe(
    tap((_) => console.log ('fetched admissions')),
    catchError(
      this.errorHandelerService.handleError<Admission[]>('fetchAll', [])
    )
  );
  }
  post(admission:Omit<Admission, 'id'>): Observable<any> {
    return this.http
    .post<Omit<Admission, 'id'>>(this.url, admission ,this.httpOptions)
    .pipe(catchError(this.errorHandelerService.handleError<any>('post')));
  }
}

Answer 1

正如@Hypenate 所說，錯誤顯示，

“（admission-list.component.ts 的第 30 行）”未定義（沒有您期望的值），如果我計算正確，第 30 行就是這個。

const stu_surname = (<string>newAdmission.stu_surname).trim();

因此，您可以嘗試在 Chrome 中使用調試器並檢查newAdmission或執行console.log(newAdmission)並檢查控制台以查看實際返回的值。

一旦您在該字段上確實有一個有效的字符串， trim應該按您的預期工作。