mysql - core.js:4442 错误类型错误:无法读取未定义的属性“修剪”
问题描述
我在 Angular Node 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')));
}
}
解决方案
正如@Hypenate 所说,错误显示,
“(admission-list.component.ts 的第 30 行)”未定义(没有您期望的值),如果我计算正确,第 30 行就是这个。
const stu_surname = (<string>newAdmission.stu_surname).trim();
因此,您可以尝试在 Chrome 中使用调试器并检查newAdmission
或执行console.log(newAdmission)
并检查控制台以查看实际返回的值。
一旦您在该字段上确实有一个有效的字符串,trim
应该可以按您的预期工作。
推荐阅读
- vue.js - 使用 vue-plotly 的 Vue.js 错误:fullLayout 未定义
- flutter - Flutter 应用的 ACH 支付处理(支持拆分支付)
- python - 将 Python ML 模型部署到 NodeJS Web 应用程序
- python - 当我在for中增加变量时,为什么迭代值没有发生任何事情?
- mysql - 是否有一个 mySQL 过程可以将重复的数据行合并为一个,然后允许我像处理一行一样操作该数据?
- jquery - 更改一个文本框值时使用哪个事件它应该更改 jquery 中另一个文本框中的相关值
- vb.net - 数据表中不需要的字符
- python - 从二进制矩阵构建图
- java - 使用 Java 获取终端多参数命令的输出
- java - 如何为 Base64.decodeBase64 编写 JUnit 测试