Angular5 ：打字错误：您提供了“未定义”的预期流。您可以提供可观察、promise、数组或可迭代

Question

我尝试用angular5实现一个登录特性。我有一个我不明白的错误。

下面是登录类：

    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(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>

我的代码编译好了，我可以访问登录页面。但是当我输入登录名和密码时，我有一个错误。我看不到对我的服务器的请求。我认为错误发生在我的超文本传输协议请求之前。这是我收到的错误：

TypeError：您在需要流的地方提供了“未定义”。您可以提供可观察、Promise、Array或Iterable。堆栈跟踪： :///./node_modulesnode_modules/rxjs/_esm5/util/_esm5： 27 :///./node_modules/rxjs/_esm5/运营商/node_modules： 18 :///./node_modules/rxjs/_esm5/运营商/_esm5： 9 :///./_esm5node_modules/rxjs/_esm5/运营商/mergeMap.js:123： 13 :///./node_modulesObservable.js:165node_modules/rxjs/Observable.js:177/_esm5： 13 :///./[e-mail]@webpack-internal/rxjs/mergeMap.js:97/可观察/MergeMapSubscriber.prototype._tryNext@webpack-internal： 13 :///./node_modulesObservable.js:162/rxjs/ :///.//MergeMapSubscriber.prototype._next@webpack-internal： 20_esm5filter.js:63 :///./node_modules/rxjs/ :///.//Subscriber.prototype.next@webpack-internal： 88Observable.js:162MergeMapOperator.prototype.call@webpack-internal :///.//rxjs/ :///.//运营商/ScalarObservable.prototype._subscribe@webpack-internal： 16_esm5map.js:60 :///.//rxjs/ :///.//Observable.prototype._trySubscribe@webpack-internal： 13node_modulesnode_modules/rxjs/_esm5/运营商/Observable.prototype.subscribe@webpack-internal： 16_esm5Observable.prototype.subscribe@webpack-internalnode_modules/rxjs/subscribeToResult.js:83/MergeMapOperator.prototype.call@webpack-internal： [e-mail]:143/rxjs/mergeMap.js:140/运营商/Observable.prototype.subscribe@webpack-internal： 16_esm5subscribeToResult@webpack-internal/rxjs/MergeMapSubscriber.prototype._innerSub@webpack-internal/FilterOperator.prototype.call@webpack-internal： 13MapOperator.prototype.call@webpack-internal :///./node_modules/rxjs/_esm5/运营商/map.js:60： 16Observable.prototype.subscribe@webpack-internal :///./node_modules/rxjs/_esm5/Observable.js:162： 13LoginComponent.prototype.OnSubmit@webpack-internal :///./src/app/login/login. part. ts： 33:9View_LoginComponent_0/

错误在第< code >行

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

Answer 1

我在发布的代码中看不到任何可能导致请求无法发送的内容。也许你在某个地方有超文本传输协议拦截器？

您的代码中也有一些错误

HttpHeaders是不可变的

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

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

Content-type您不需要为返回json的请求设置内容类型，httpClient默认情况下会自动将响应转向json Object

错误的查询参数

应该是=而不是？

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

组件

>

this.connected 永远不会是布尔值，而是对可观察值的引用

在subcribe方法中，数据是布尔值，而不是对象（因为您在服务中映射了它）

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