Ich versuche auf einen Rest-Service für Login-Funktion zuzugreifen

Question

Ich habe eine Klick-Funktion in HTML deklariert und versucht, es in component.ts Datei zu verwenden. Aber ich bekomme eine Fehlermeldung mit dem Hinweis "OnTestLogin kann nicht gefunden werden".

Hier sind meine Code-Dateien:

Login Component.ts

import { Component } from '@angular/core'; 
import { LoginService } from './LoginService'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.scss'], 
    providers:[LoginService] 
}) 
export class LoginComponent { 
    postData: string; 

    constructor(private _httpService: LoginService) { 
    OnTestLogin(){ 
    this._httpService.postJSON().subscribe(
     data => this.postData = JSON.stringify(data), 
     error => alert(error), 
     () => console.log("Finished") 
    ); 
    } 
} 
} 

ich in loginComponent.ts Datei bin immer Fehler, wenn ich die OnTestLogin() Funktion bin mit.

Login.component.html

<div class="app flex-row align-items-center"> 
    <div class="container"> 
    <div class="row justify-content-center"> 
     <div class="col-md-8"> 
     <div class="card-group mb-0"> 
      <div class="card p-2"> 
      <div class="card-block"> 
       <h1>Login</h1> 
       <p class="text-muted">Sign In to your account</p> 
       <div class="input-group mb-1"> 
           <span class="input-group-addon"><i class="icon-user"></i> 
           </span> 
       <input type="text" class="form-control" placeholder="Username"> 
       </div> 
       <div class="input-group mb-2"> 
           <span class="input-group-addon"><i class="icon-lock"></i> 
           </span> 
       <input type="password" class="form-control" placeholder="Password"> 
       </div> 
       <div class="row"> 
       <div class="col-6"> 
        <!-- 
        <button type="button" class="btn btn-primary px-2">Login</button> 
        !--> 
        <button (click)="OnTestLogin()">Login</button> 
        <p>Output:{{postData}}</p> 
       </div> 
       <div class="col-6 text-right"> 
        <button type="button" class="btn btn-link px-0">Forgot password?</button> 
       </div> 
       </div> 
      </div> 
      </div> 
      <div class="card card-inverse card-primary py-3 hidden-md-down" style="width:44%"> 
      <div class="card-block text-center"> 
       <div> 
       <h2>Sign up</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
       <button type="button" class="btn btn-primary active mt-1">Register Now!</button> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 


Login Service.ts 

import { Injectable } from '@angular/core'; 
     import { Http } from '@angular/http'; 
     import { Headers } from '@angular/http'; 
     @Injectable() 
     export class LoginService{ 
      constructor(private _http:Http){} 
      postJSON(){ 
       var json = JSON.stringify({var1: 'username', var2: 'password'}); 
       var params = 'json =' +json; 
       var headers = new Headers(); 
       headers.append('Content-type', 'application/x-www-form-urlencoded'); 
       return this._http.post('http://localhost:8080/login', params,{ 
        headers: headers 
       }).map(res => res.json()); 
      } 
     } 

ich eine Klick-Funktion für die loginbutton erklärt haben, die "OnTestLogin" ist. Gibt es irgendwelche Importe, die ich in Component.ts-Datei vermisse?

Answer 1

Eigentlich war die Vorlage für eine geeignete Methode suchen, wenn Klicks Benutzer auszuführen und das ist nicht definiert

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.scss'], 
    providers:[LoginService] 
}) 
export class LoginComponent { 
postData: string; 

constructor(private _httpService: LoginService) {} 
OnTestLogin(){ 
    this._httpService.postJSON().subscribe(
    data => this.postData = JSON.stringify(data), 
    error => alert(error), 
    () => console.log("Finished") 
); 
} 
} 

verwendet es Ihr Problem