Как задержать функцию подписки - PullRequest
Новая
       44

Как задержать функцию подписки

0 голосов
/ 10 октября 2018

Введение: Я пытаюсь создать страницу входа в Angular2, используя webapi.Моя конечная цель - перенаправить пользователя на новый компонент при успешном входе в систему.

Проблема: Моя проблема в том, что я не получаю правильный результат при моем первом попадании в веб-API.Я проверяю свой веб-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;
        }
    }
}

Результат

enter image description here

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Можете ли вы проверить свою вкладку "Сеть" в Chrome и посмотреть, выполняется ли ваш http-вызов браузером.Если он появляется, нажмите на предварительный просмотр, чтобы увидеть ответ.
Однако этот код совершенно неуместен.Также функция myFunc внутри компонента не должна быть закрытой, если вы не вызываете ее из другой функции, доступной для DOM.Он должен быть внутри функции подписки, как показано ниже: 

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

}
0 голосов
/ 10 октября 2018

Получаете ли вы какие-либо ошибки перед полетом в сетевом мониторе, я думаю, что вы столкнулись с проблемой "CORS", если возможно, вы можете поделиться сетевым монитором в инструменте разработчика.

...