（XXX）は機能していません。2 asp.netコア

Question

私はとして古くなっています。this.loginservicemodel.loginHttpCallは関数ではありません。私はアンギュラ2構造を3つの部分、すなわち1）コンポーネント2）ビューモデルと3）サービスとして分割しました。

コンポーネントはViewModelsと通信し、サービスします。サービスはviewModelにアクセスできます。

私は

loginservice.ts

import { Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { LoginViewModel } from "../ViewModel/Login.ViewModel"; 
@Injectable() 
export class LoginService { 
    private heroesUrl = 'app/heroes'; // URL to web API 
    private loginModel = LoginViewModel; 
    constructor(private http: Http) { } 

    public loginHttpCall() { 
     console.log(this.loginModel); 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     this.http.post('/contact/send', JSON.stringify(this.loginModel), { headers: headers }) 
      .subscribe(); 
} 

} 

Login.ViewModel.ts

export class LoginViewModel { 
    userName: string; 
    password: string; 
} 

login.Components.ts以下のようにサービス・ファイル内の関数を返してきました

import { Component} from '@angular/core'; 
import { LoginViewModel } from "../ViewModel/Login.ViewModel"; 
import { LoginService} from "../Service/Login.Service"; 
@Component({ 
    selector: 'login-app', 
    templateUrl: 'Home/partialLogin', 
    providers: [LoginViewModel, LoginService] 
}) 

export class LoginComponent { 
    private model = LoginViewModel; 
    private loginservicemodel: LoginService; 

    constructor() { 
     this.model.userName = 'erere@ada.comasdasd'; 
     this.model.password = "test anand"; 

    } 

    login(event) { 
     this.loginservicemodel.loginHttpCall(); 
     event.preventDefault(); 

    } 

} 

ボタンをクリックすると、ログイン（イベント）関数が呼び出されました。

TypeError: Cannot read property 'loginHttpCall' of undefined

の方法this.loginservicemodel.loginHttpCall();関数を呼び出すが、私はエラーを取得していますModule.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { Http } from '@angular/http'; 
import { LoginComponent } from "./Components/login.Component"; 


@NgModule({ 
    imports: [BrowserModule, FormsModule], 
    declarations: [LoginComponent], 
    bootstrap: [LoginComponent] 
}) 
export class AppModule { } 

私は、そのメソッドを得ていないが、どこが間違いを犯しています知っています知りません。

誰でもこれを手伝ってください。

Answer 1

コンストラクタに依存関係を挿入する必要があります。このように：

constructor(private loginservicemodel: LoginService) { 
    this.model.userName = 'erere@ada.comasdasd'; 
    this.model.password = "test anand"; 
}