Question

我是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>

这是我的RegisterPage：

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

}

这是我的UserService：

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

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

<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。

Answer 3

尝试以下操作：

在组件中添加nmUser声明，如下所示：

nmUser：NmUser =新的nmUser（...您的构造函数参数...）;

在您的HTML模板中尝试使用

this.nmUser.username

代替

nmUser.username

在您的ngModel中

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

3 个答案: