如何修复 'ERROR TypeError: 无法读取 ANGULAR 中未定义的属性'用户名''答案

【问题标题】：How to fix 'ERROR TypeError: Cannot read property 'username' of undefined' in ANGULAR如何修复 'ERROR TypeError: 无法读取 ANGULAR 中未定义的属性'用户名''
【发布时间】：2019-09-11 21:50:55
【问题描述】：

我正在尝试使用 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

【问题讨论】：

错误是哪一行，哪个文件..
ts文件中的错误，这里：user.username = this.User.username

标签： angular angular-material angular-services angular-ngmodel

【解决方案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,  ...};

【讨论】：

【解决方案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类型的var user

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

【讨论】：