Question

我在HTML中声明了一个click函数，并尝试在component.ts文件中使用它。但是我收到一条错误，上面写着“无法找到OnTestLogin”。

以下是我的代码文件：

登录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")
    );
  }
}
}

当我使用OnTestLogin（）函数时，我在loginComponent.ts文件中收到错误。

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());
            }
        }

我已经为loginbutton声明了一个单击函数，即“OnTestLogin”。我在Component.ts文件中缺少任何导入吗？

Answer 1

实际上，模板正在寻找一种在用户点击时执行的合适方法，而且未定义

@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")
  );
 }
}

使用它可以解决您的问题

我正在尝试访问用于登录功能的休息服务

1 个答案: