2プロパティを読み取ることができませんアンギュラ '0' 未定義のエラーの

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> 

エラーコンソール出力：

私がサービスをテストするために書いたアンケートは、サービスとコンポーネント2を無意識のうちに間違わせるでしょう。私はサービスのコードを入れ、コンポーネントのコードはhtmlコードをpassworに書き込んでいなかったので、既にusernameを送信していたので、リクエストを送信できました。このエラーを修正するにはどうすればよいですか？

Answer 1

doLogin()メソッドを呼び出す場所や方法はわかりませんが、eventオブジェクトを呼び出しているので、ログインボタンのハンドラは(click)だと思います。

、それ以外の場合は呼び出さないであろう、私はリターンがあなたのために有益な何もしませんし、あなたがObservableあなたがサービスから取得するに加入insetadすべきだと思う、そこから行く：私は

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で外部を拭き取ってください。