Question

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Router }            from '@angular/router';
import { FormBuilder, Validators } from '@angular/common';
import { Md5 } from 'ts-md5/dist/md5';

import { User }        from '../user/user';
import { UserService } from '../user/user.service';


@Component({
  selector: 'my-dashboard',
  templateUrl: 'app/dashboard/dashboard.component.html',
  styleUrls: ['app/dashboard/dashboard.component.css'],
})
export class DashboardComponent implements OnInit {
  loginCheck: boolean = false;

  constructor(private router: Router, private userService: UserService) {   }

  ngOnInit() { 
    this.loginCheck = false;
  }

  doLogin(event: any, username: string, password: string) {
    event.preventDefault();
    let data = {
      UserName: username,
      Password: Md5.hashStr(password)
    }
    return this.userService.login('http://url/api/Authorization/Login', data);
  }



  userDetail(user: User){
    let link = ['/userdetail', user.id];
    this.router.navigate(link);
  }

}

user.service.ts

import { Injectable }    from '@angular/core';
import { Headers, Http, Response } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { User } from './user';

@Injectable()
export class UserService {
    testUrl: string = '../config/users';
    constructor(private http: Http) { }

    getUser(){
      return this.http.get(this.testUrl)
                      .toPromise()
                      .then(response => response.json().data as User[])
                      .catch(this.handleError); 
    }

    getUserDetail(id: number){
      return this.getUser().then(users => users.find(user => user.id === id));
    }

    login(url: string, data: Object){
      let headers = new Headers({'Content-Type': 'application/json'});
      return this.http.post(url, JSON.stringify(data));

    }

    private handleError(error: any) {
      console.error('An error occurred', error);
      return Promise.reject(error.message || error);
    }
}

dashboard.component.html

<div *ngIf="!loginCheck" class="login center-block">
  <h5>Giriş Yap</h5>
  <form role="form" (submit)="doLogin($event, username.value, password.value)">
  <div class="form-group">
    <input type="text" #username class="form-control" id="username" placeholder="Kullanıcı Adı">
  </div>
  <div class="form-group">
    <input type="password" #password class="form-control" id="password" placeholder="Şifre">
  </div>
  <button type="submit" class="btn btn-default">Giriş Yap</button>
</form>
</div>

控制台输出错误：

Error console output

我写给测试服务的Angular入口会在无意义地获取服务和组件2时出错。我把服务的代码和组件的代码没有写成html代码密码已经成功撤销用户名发送请求。我该如何解决这个错误？

Answer 1

我不完全确定，您在何处或如何调用doLogin()方法，但由于您正在调用event对象，我猜这是您的(click)处理程序登录按钮。

从那里开始，我认为回报不会对你做任何有用的事情，你应该插入订阅你从服务获得的Observable，否则它不会被调用：

  doLogin(event: any, username: string, password: string) {
    event.preventDefault();
    let data = {
      UserName: username,
      Password: Md5.hashStr(password)
    }

    this.userService.login('http://url/api/Authorization/Login', data)
        subscribe((data) => {
            // do something with the api response
        });
  }

Answer 2

我解决了这个问题。检查app.module.ts中内存后端组件中的导入文件，阻止修复它们的意愿，用URL擦除外部。

Angular 2无法读取属性＆＃39; 0＆＃39;未定义的错误

2 个答案: