Angular 6 TypeError: Cannot read property 'username' of undefined

Question

我是 Angular 6 的新手，学习了 Angular 入门教程。

但是，本教程中没有解释我想在我的案例中做什么。

我希望能够在我的模板中使用表单填充一个实体，将这个填充的实体发送到我的 API 的用户注册方法。

我得到标题中的错误：（与 nmUser.username 或 NmUser.username 相同的错误）

TypeError: Cannot read property 'username' of undefined

我做错了什么？

这是我的模板：

<ion-content>
  <ion-list>

    <ion-item>
      <ion-label color="orange" floating>Pseudo</ion-label>
      <ion-input [(ngModel)]="NmUser.username" type="text" name="pseudo"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label color="orange" floating>Email</ion-label>
      <ion-input [(ngModel)]="nmUser.email" type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label color="orange" floating>Mot de passe</ion-label>
      <ion-input [(ngModel)]="nmUser.password" color="orange" type="password" name="password" pattern=".{6,}"></ion-input>
    </ion-item>

    <ion-item style="margin-top: 5%" no-lines>
      <ion-label color="orange">Lieu de travail</ion-label>
      <ion-select [(ngModel)]="nmUser.workplace">
        <ion-option value="Mc_Donald's_Monaco">McDo Monaco</ion-option>
        <ion-option value="BK_Monaco">BK Monaco</ion-option>
        <ion-option value="SoGreen">SoGreen</ion-option>
        <ion-option value="Decathlon">Decathlon</ion-option>
        <ion-option value="La_Boule_Noire">La Boule Noire</ion-option>
        <ion-option value="High_Club">High Club</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label color="orange" floating>Intitulé du poste</ion-label>
      <ion-input [(ngModel)]="nmUser.job" color="orange" type="text" name="job"></ion-input>
    </ion-item>

    <ion-item style="margin-top: 5%" no-lines>
      <ion-label color="orange">Afficher mon lieu de travail</ion-label>
      <ion-toggle [(ngModel)]="nmUser.showJob"></ion-toggle>
    </ion-item>

    <ion-item style="margin-top: 5%" no-lines>
      <ion-label color="orange">Recevoir des emails automatiques</ion-label>
      <ion-toggle></ion-toggle>
    </ion-item>

    <ion-item style="margin-top: 5%" no-lines>
      <ion-label color="orange">J'ai lu et j'accepte les <span class="cgu">CGU</span></ion-label>
      <ion-toggle></ion-toggle>
    </ion-item>

    <ion-item style="margin-top: 5%" no-lines>
      <button ion-button color="orange" outline block large style="margin-top: 5%;" (click)="register()">S'inscrire</button>
    </ion-item>

  </ion-list>
</ion-content>

这是我的注册页面：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NmUserService } from '../../app/entities/nmUser/nmUser.service';
import { NmUser } from './nmUser';

@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
  providers: [NmUserService]
})
export class RegisterPage {

  constructor(private navCtrl: NavController, private userService: NmUserService) {

  }

  register(user: NmUser): void {
    this.userService.add(user).subscribe(
        (result) => {
            // This code will be executed when the HTTP call returns successfully
        },
        (error) => {
            console.log(error);
        }
    );
  }

}

这是我的用户服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpErrorResponse, HttpHeaders} from '@angular/common/http';
import { MessageService } from '../../message.service';
import { NmUser } from './nmUser';
import { Observable } from 'rxjs/Rx';
import { catchError, map } from 'rxjs/operators';
import 'rxjs/add/observable/throw';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class NmUserService {

    private userUrl = 'http://my-api.com/api/user/';

    constructor(private http: HttpClient, private messageService : MessageService) {}

    /**
     * Create the passe nmUser.
     */
    add(nmUser : NmUser) : Observable<NmUser> {
        let body = nmUser;

        return this.http.post(this.userUrl, body)
            .pipe(
                map(response => new NmUser(response)),
                catchError(this.handleError)
            );
    }
}

这是我的用户实体：

import {NmWorkplace} from '../nmWorkplace/nmWorkplace';

export class NmUser {
    // Raw attributes
    id : number;
    email : string;
    username : string;
    profileImageUrl : string;
    password : string;
    job : string;
    showJob : boolean;
    note : number;
    points : number;
    roles : string;
    salt : string;
    status : string;
    createdAt : Date;
    updatedAt : Date;
    deletedAt : Date;
    notificationsActivated : boolean;
    connected : boolean;
    // x-to-one
    workplace : NmWorkplace;
}

如有任何帮助，我们将不胜感激。

谢谢！

Answer 1

这是您的组件的代码，没有函数的内容：

export class RegisterPage {
  constructor(private navCtrl: NavController, private userService: NmUserService) {}
  register(user: NmUser): void {}
}

在模板中，您尝试使用 class 成员：

<ion-input [(ngModel)]="NmUser.username" type="text" name="pseudo"></ion-input>

但是 NmUser 未定义（您的组件中没有它），从而解释了您的错误。

Answer 2

您在 [(ngModel)] 中引用了 nmUser 但您没有在 component.ts 中定义该变量，您需要在此处添加该声明

nmUser: NmUser;

另请注意，在您的 .html 中，您调用 (click)=register() 时没有任何参数，而在您的 .ts 中，您希望用户在您的 register(user: NmUser)

上

P.S。我不是 100% 确定，但我认为 Angular 自 v4.0 以来鼓励使用 Reactive forms ，而不是 ngModel with banana in a box [()] 表示法。

Angular 6 TypeError: Cannot read property 'username' of undefined

Angular 6 TypeError: Cannot read property 'username' of undefined

typeerror

angular

angular6