angular - Angular 6 TypeError：无法读取未定义的属性“用户名”

问题描述

我是 Angular 6 的新手，并且完成了 Angular 入门教程。

但是，本教程没有解释我想要做的事情。

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

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

TypeError：无法读取未定义的属性“用户名”

我究竟做错了什么？

这是我的模板：

<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;
}

任何帮助，将不胜感激。

谢谢！

标签： angulartypeerrorangular6

angular - Angular 6 TypeError：无法读取未定义的属性“用户名”

问题描述

解决方案

推荐阅读