Angular5：TypeError：您提供了'undefined'，其中包含一个流。 您可以提供Observable，Promise，Array或Iterable

Question

我尝试使用angular5实现登录功能。 我有一个错误，我不明白。

这是login.component.ts类：

    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    import { NgForm } from '@angular/forms';
    import { FormGroup, FormControl } from '@angular/forms';
    import { ReactiveFormsModule } from '@angular/forms';


    import { HttpErrorResponse } from '@angular/common/http';
    import { UserService } from '../auth/user.services';

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements OnInit {
      ngForm: NgForm;
      login: string;
      password: string;
      myForm: FormGroup;
      isLoginError : boolean = false;
      connected : Boolean = false;
      constructor(private userService: UserService, private router: Router) { }

      ngOnInit() {


      }

    // Execute this when submit login form
    OnSubmit(form){

        console.log(form.value);
        console.log(form.value.login);
      this.connected =   this.userService.authenticate(form.value.login,form.value.password).subscribe((data : any)=>{
        return data.password = form.value.password;
        //return true;
      });
  }
  }

在user.service.ts中，我有authenticate方法：

authenticate(login:string, password:string) :Observable<Boolean> {
console.log('Authenticate ....');
const credentials = {login:login, password:password};
let headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');
console.log('Appended content type ....');
console.log(' Login '+login+' Password '+password+' Headers '+headers);
//var data = this.http.get<any>(
//              '/users?login?'+JSON.stringify(login),
//               { headers }
//);
//console.log('Data '+data);
  return this.http.get<any>(
                '/users?login?'+JSON.stringify(login),
                 { headers }
  ) //returns a User object having password
    .map(user => user.password === password); // maps result to the desired true or false value

}

这是我的登录表单：

<div class="row">

<div class="col-md-6 offset-md-3 text-center">
  <h2> Formulaire de connexion </h2>
<form (ngSubmit)="OnSubmit(loginForm)" #loginForm="ngForm">
  <div class="form-group">
    <label for="exampleInputEmail1">Login</label>
    <input type="text" class="form-control" id="exampleInputEmail1"  [(ngModel)]="login" name="login"  aria-describedby="emailHelp" placeholder="Login">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" required  [(ngModel)]="password" name="password" placeholder="Mot de passe">
  </div>
<!--  <button type="submit" class="btn btn-primary" (click)="login()" [disabled]="!loginForm.form.valid">Connexion</button>
-->
<button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid">Connexion</button>

</form>
</div>

</div>

我的代码编译，我可以访问登录页面。 但是当我输入登录名和密码时，我有一个错误。 我无法看到我的服务器的请求。 我认为错误发生在我的http请求之前。 这是我得到的错误：

TypeError：您提供了'undefined'，其中包含一个流。 您可以提供Observable，Promise，Array或Iterable。 堆栈跟踪：subscribeToResult @ webpack-internal：///./node_modules/rxjs/_esm5/util/subscribeToResult.js:83:27 MergeMapSubscriber.prototype._innerSub@webpack-internal：///。/ node_modules / rxjs / _esm5 / operators / mergeMap.js:143:18 MergeMapSubscriber.prototype._tryNext@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:140：9 MergeMapSubscriber.prototype._next@webpack-internal：/ //./node_modules/rxjs/_esm5/operators/mergeMap.js:123:13 Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:13 ScalarObservable.prototype ._subscribe @ webpack-internal：///./node_modules/rxjs/_esm5/observable/ScalarObservable.js:53:13 Observable.prototype._trySubscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable。 js：177：20 Observable.prototype.subscribe@webpack-internal：///./node_modules/rxjs/_esm5/Observable.js：165：88 MergeMapOperator.prototype.call@webpack-internal：///./node_modules/ rxjs / _esm5 / operators / mergeMap.js：97：16 Observable.prototype.subscribe@webpa ck-internal：///./node_modules/rxjs/_esm5/Observable.js：162：13 FilterOperator.prototype.call@webpack-internal：///./node_modules/rxjs/_esm5/operators/filter.js:63 ：16 Observable.prototype.subscribe@webpack-internal：///./node_modules/rxjs/_esm5/Observable.js：162：13 MapOperator.prototype.call@webpack-internal：///./node_modules/rxjs/_esm5 /operators/map.js:60:16 Observable.prototype.subscribe@webpack-internal：///./node_modules/rxjs/_esm5/Observable.js：162：13 MapOperator.prototype.call@webpack-internal：// /./node_modules/rxjs/_esm5/operators/map.js:60:16 Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:162:13 LoginComponent.prototype。 OnSubmit @ webpack-internal：///。/ src / app / login / login.component.ts：33：9 View_LoginComponent_0 / <@ng：///AppModule/LoginComponent.ngfactory.js:29:23 handleEvent @ webpack- internal：///./node_modules/@angular/core/esm5/core.js：13763：115 callWithDebugContext @ webpack-internal：///./node_modules/@angular/core/esm5/core.js：15272：39 debugH andleEvent @ webpack-internal：///./node_modules/@angular/core/esm5/core.js：14859：12 dispatchEvent @ webpack-internal：///./node_modules/@angular/core/esm5/core.js ：10178：16 eventHandlerClosure / <@ webpack-internal：///./node_modules/@angular/core/esm5/core.js：12517：38 EventEmitter.prototype.subscribe / schedulerFn <@ webpack-internal：///。 /node_modules/@angular/core/esm5/core.js:4559:36 SafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:245:13 SafeSubscriber.prototype.next @ webpack-internal：///./node_modules/rxjs/_esm5/Subscriber.js:192:17 Subscriber.prototype._next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js：133： 9 Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:13 Subject.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/ Subject.js：65：17 EventEmitter.prototype.emit@webpack-internal：///./node_modules/@angular/core/esm5/core.js：4527：24 NgForm.prototype.onSubmit@webpack-internal：// /。/节点_ modules /@angular/forms/esm5/forms.js：5840：9 View_LoginComponent_0 / <@ng：///AppModule/LoginComponent.ngfactory.js:21:23 handleEvent @ webpack-internal：///./node_modules/@ angular / core / esm5 / core.js：13763：115 callWithDebugContext @ webpack-internal：///./node_modules/@angular/core/esm5/core.js：15272：39 debugHandleEvent @ webpack-internal：///。 /node_modules/@angular/core/esm5/core.js:14859:12 dispatchEvent @ webpack-internal：///./node_modules/@angular/core/esm5/core.js：10178：16 renderEventHandlerClosure / <@ webpack- internal：///./node_modules/@angular/core/esm5/core.js：10803：38 decoratePreventDefault / <@ webpack-internal：///./node_modules/@angular/platform-b​​rowser/esm5/platform-b​​rowser .js：2680：53 ZoneDelegate.prototype.invokeTask@webpack-internal：///./node_modules/zone.js/dist/zone.js：421：17 onInvokeTask @ webpack-internal：///./node_modules/@ angular / core / esm5 / core.js：4956：24 ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:420:17 Zone.prototype.runTask@webpack -interna l：///./node_modules/zone.js/dist/zone.js：188：28 ZoneTask.invokeTask@webpack-internal：///./node_modules/zone.js/dist/zone.js：496：24 invokeTask @ webpack-internal：///./node_modules/zone.js/dist/zone.js：1517：9 globalZoneAwareCallback @ webpack-internal：///./node_modules/zone.js/dist/zone.js：1543 ：17

错误在行<form (ngSubmit)="OnSubmit(loginForm)" #loginForm="ngForm">

我没看到问题出在哪里。 我错过了什么？ 谢谢，谢谢

Answer 1

我在发布的代码中看不到任何可能导致请求不被发送的内容。 也许你在某处有一些http拦截器？

您的代码中也存在一些错误

HttpHeaders是不可变的

因此，如果您希望正确发送标头，则需要将代码更改为

let headers = new HttpHeaders().append('Content-Type', 'application/json');

content-type你不需要为返回json的请求设置内容类型， httpClient自动将响应转换为json对象

查询参数错误

它应该是=而不是？

'/users?login='+JSON.stringify(login),

零件

• this.connected永远不会是一个布尔值，而是对observable的引用

• 在subcribe方法中，data是布尔值，而不是对象（因为您在服务中将其映射）

注意我希望你展示的身份验证方法不是最后一种。 就目前而言，它假设服务器可以返回用户的详细信息，包含明文密码...如果您的用户将其密码存储在纯文本服务器端，从安全角度来看这真的很糟糕