Question

简介：我正在尝试使用webapi在Angular2中构建登录页面。我的最终目标是在成功登录后将用户重定向到新组件。

问题：我的问题是我第一次点击网络api时未得到正确的结果。我使用邮递员检查了我的Web API，它工作正常，因此问题出在角度代码中。我研究找出问题所在，并得出结论来推迟我的订阅，但无法延迟我的情况。

请找到以下代码：

Login.component.ts：

import { Component , OnInit } from '@angular/core';
import { LoginService } from './Login.Service';

@Component(
    {
        selector: 'Login',
        templateUrl: './Login.component.html',
    }
)

export class LoginComponent implements OnInit {
    userName: string ;
    paswword: string;
    result: string = 'False';    

    constructor(private loginService: LoginService) { }

    ngOnInit() {

    }

    private myFunc(): void {   
        this.loginService.isLogin("myServiceURL", "userName", this.userName, "pwd", this.paswword)
                         .subscribe(response => this.result = response.toString());
        if (this.result == "True") {
            console.log(this.result);
            console.log(1);
        }
        else {
            console.log(this.result);
            console.log(0);
        }
    }
}

Login.component.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="text" class="form-control" [(ngModel)]="userName"/>
    <input type="password" class="form-control" [(ngModel)]="paswword"/>
    <button (click)="myFunc()"></button>
 </body>
</html>

Login.service.ts：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http'
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';


@Injectable()
export class LoginService {
    respose: string;

    constructor(private _http: Http) {        
    }

    isLogin(url: string, key1: string, value1: string, key2: string, value2: string): Observable<string> {       
        return this._http.get(url + "?" + key1 + "=" + value1 + "&" + key2 + "=" + value2)
            .map((res: Response) => res.json());
    }

}

app.module.ts：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'
import { HttpModule } from '@angular/http'
import { LoginComponent } from './LoginComponent/Login.component'
import { AppComponent } from './app.component';
import { LoginService } from './LoginComponent/Login.Service'

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

LoginWebAPI

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;


namespace MOMWebAPI.Controllers
{
    public class LoginController : ApiController
    {
        [HttpGet]
        public string IsLogin(string userName, string pwd)
        {
            string isLogin = "False";
            UserMaster objUserMaster = new UserMaster();
            MOMEntities momEntity = new MOMEntities();
            objUserMaster = momEntity.UserMasters.FirstOrDefault(x => x.UserName == userName && x.Password == pwd);
            if (objUserMaster != null)
            {
                isLogin = "True";
            }

            return isLogin;
        }
    }
}

结果

Answer 1

您是否在网络监视器中遇到任何飞行前错误，我认为您面临“ CORS”问题，如果可以的话，请在开发人员工具中共享网络监视器。

Answer 2

您能否在Chrome中检查“网络”标签，并查看浏览器是否正在拨打http电话。如果显示，则单击预览以查看响应。
但是，此代码完全不合适。同样，除非您从公开给DOM的另一个函数调用组件内部的 myFunc 函数，否则它不应为私有函数。它应该在如下的订阅函数中：

private myFunc(): void {   
    this.loginService.isLogin("myServiceURL", "userName", this.userName, "pwd", this.paswword)
                     .subscribe((response) => {

                        if (!!response) {
                            this.result = response.toString();
                            console.log(this.result);
                            console.log(1);
                        }
                        else {
                            console.log(this.result);
                            console.log(0);
                        }
                     });

}

如何延迟订阅功能

2 个答案: