Question

我是一名实习生前端开发人员，试图通过Angular 2。这个项目涉及一个简单的登录屏幕，我无法工作。我已经尝试了各种解决方案，但它根本不起作用。我继续得到我似乎无法摆脱的错误。这次是“评估'提交'时出错”。 “无法读取未定义的属性'帖子'。我已经解决了这个问题好几天了，我无处可去。任何帮助都将不胜感激......

我有一个LoginService，一个LoginComponent和一个login.html

的login.html：

<div id="login-container" class="center-block">
<form role="form" (submit)="login($event, username.value, password.value)">
    <div class="form-group text-left">
        <label for="username">Username</label>
        <input type="text" 
        #username class="form-control" 
        id="username" 
        placeholder="Gebruikersnaam">
    </div>
    <div class="form-group text-left">
        <label for="password">Password</label>
        <input type="password"
        #password class="form-control" 
        id="password" placeholder="Paswoord">
    </div>
    <div class="form-group text-left">
        <input type="checkbox" id="login-remember">
        <button type="submit" id="btn-login"
        class="btn btn-default">Submit</button>
    </div>
</form>
</div>

loginComponent：

import { Component, View, Inject } from 'angular2/core';
import {ROUTER_DIRECTIVES, Router, RouterLink, RouterOutlet } from 'angular2/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';
import { Http, Headers, contentHeaders } from 'angular2/http';
import {UserVM} from '../../interfaces/user';

@Component({
  selector: 'login',
  templateUrl: './app/templates/login.html',
  directives: [ROUTER_DIRECTIVES, RouterOutlet, RouterLink, CORE_DIRECTIVES],
  providers: [Http]

})
export class LoginCmp {
      login(event, username, password) {
    event.preventDefault();
    let body = JSON.stringify({ username, password });
    this.http.post('http://localhost:3000/sessions/create', body, { headers: contentHeaders })
      .subscribe(
        response => {
          localStorage.setItem('jwt', response.json().id_token);
          this.router.parent.navigateByUrl('/actuals');
        },
        error => {
          alert(error.text());
          console.log(error.text());
        }
      );
  }
}

loginService：

import { Component, View } from 'angular2/core';
import {RouteConfig, Router, RouterLink, RouterOutlet, Http} from 'angular2/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';
import { Http, Headers } from 'angular2/http';
import { contentHeaders } from '../common/headers';


export class LoginService {

  constructor(public router: Router, public http: Http) {
  }

  login(event, username, password) {
    event.preventDefault();
    let body = JSON.stringify({ username, password });
    this.http.post('http://localhost:3000/sessions/create', body, { headers: contentHeaders })
      .subscribe(
        response => {
          localStorage.setItem('jwt', response.json().id_token);
          this.router.parent.navigateByUrl('/actuals');
        },
        error => {
          alert(error.text());
          console.log(error.text());
        }
      );
  }
}

Answer 1

您需要将http实例注入LoginCmp组件：

export class LoginCmp {
  constructor(private http:Http) {
  }
}

这将修复您的错误：“无法读取未定义的属性'post'。”。

我看到您为登录处理实现了一项服务，您可以利用它：

@Component({
  (...)
  providers: [ LoginService ]
})
export class LoginCmp {
  constructor(private loginService:LoginService) {
  }

  login() {
    this.loginService.login(this.username, this.password);
  }
}

最后一条评论。您应该使用[(ngModel)]来获取用户名和密码的值而不是本地变量，因为它们不是为此而做的......

以角度2登录

1 个答案: