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

Answer 1

您永远不会初始化EditUserDialogComponent的属性User。

代替

export class EditUserDialogComponent implements OnInit {
  User:User;

尝试

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

如果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();。

如何修复“错误TypeError：无法读取未定义的属性”用户名”

2 个答案: