如何修复"错误类型错误：无法读取 ANGULAR 中未定义的属性'用户名'

Question

>我正在尝试使用 angular 和 laravel 编辑用户，所以我试图将用户从前端传递到后端，但我遇到了这个错误

我在这个项目中使用了角度材料

edit-user-dialog.component.ts：

import { Component, OnInit ,Inject } from '@angular/core';
import {MatDialogModule} from '@angular/material/dialog';
import {
UsersService
} from 'src/app/services/users.service';
import {
MatDialogRef,
MAT_DIALOG_DATA,
MatTableDataSource
} from '@angular/material';
import { User } from 'src/app/Models/User';
import {
ToastrService
} from 'ngx-toastr';
import { DialogData } from 'src/app/products/add-product/add-product.component';
@Component({
selector: 'app-edit-user-dialog',
templateUrl: './edit-user-dialog.component.html',
styleUrls: ['./edit-user-dialog.component.css']
})
export class EditUserDialogComponent implements OnInit {
User:User;
constructor(public dialogRef: MatDialogRef < EditUserDialogComponent > ,
// tslint:disable-next-line: max-line-length
@Inject(MAT_DIALOG_DATA)  public data: any, private toast: ToastrService, private userservice: UsersService, ) { }
ngOnInit() {
}
onNoClick(): void {
this.dialogRef.close();
}
EditUser()
{
let user: User;
user.id = this.data.user.id
user.username = this.User.username
user.firstname = this.User.firstname
user.lastname = this.User.lastname
user.address = this.User.address
user.emailaddress = this.User.emailaddress
console.log(User);
this.userservice.EditUser(User).subscribe(data => {
this.toast.success('Success', 'Order edited!')
this.dialogRef.close();
//this.isLoading = false;
}, error => this.toast.error('Error', 'error.message'));
}
}

edit-user-dialog.component.html：

<div class="control-panel">

<form class="example-form">

<table class="example-full-width" cellspacing="0">
<tr>
<td><mat-form-field class="example-full-width">
<input matInput placeholder="Username"[(ngModel)]="User.username">
</mat-form-field></td>
</tr> 
<tr>
<td><mat-form-field class="example-full-width">
<input matInput placeholder="First name" [(ngModel)]="User.firstname">
</mat-form-field></td>
<td><mat-form-field class="example-full-width">
<input matInput placeholder="Last name" [(ngModel)]="User.lastname">
</mat-form-field></td>
</tr></table>
<p>
<mat-form-field class="example-full-width">
<textarea matInput placeholder="Address" [(ngModel)]="User.address"></textarea>
</mat-form-field>
<mat-form-field class="example-full-width">
<textarea matInput placeholder="Emial Address" [(ngModel)]="User.emailaddress"></textarea>
</mat-form-field>
</p>
<button mat-fab color="warn" (click)="EditUser(User)">Edit User</button>
</form>

users.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UsersService {
public token: string = sessionStorage.getItem('token');
public resID: string = sessionStorage.getItem('ID');
private _UsersUrl = "http://127.0.0.1:8000/api/users";
private _EditUserUrl = "http://127.0.0.1:8000/api/user/";
constructor(private http: HttpClient) { }

getUsers() : Observable<any>{
let headers = new HttpHeaders({
'Authorization': 'Bearer ' + this.token ,
});
let option = { headers: headers };
return this.http.get<any>(this._UsersUrl , option).pipe()
};
EditUser(User) : Observable<any>{
let headers = new HttpHeaders({
'Authorization': 'Bearer ' + this.token ,
});
let option = { headers: headers };
return this.http.put<any>(this._UsersUrl + User.id , option).pipe()
};

}

如何修复此错误并将用户传递给 laravel(英语：Laravel(

Answer 1

您从不初始化 EditUserDialogComponent 的属性 User。

而不是

export class EditUserDialogComponent implements OnInit {
User:User;

试试这个

export class EditUserDialogComponent implements OnInit {
User:User = new User();

如果用户模型是一个接口而不是一个类，请尝试类似的东西：

export class EditUserDialogComponent implements OnInit {
User:User = {username: null, firstname: null, lastname: null,  ...};

Answer 2

尝试将其更改为：

let user: User = {
id = this.data.user.id
username: this.User.username
firstname: this.User.firstname
lastname: this.User.lastname
address: this.User.address
emailaddress: this.User.emailaddress
};

let user: User不会实例化用户对象。如果仅定义类型User的变量user

此外，代码中没有任何地方实际实例化this.User因此您可能还需要在 OnInit 中User:User = new User();。