Angular5：TypeError：您在预期流的位置提供了“未定义”。您可以提供 Observable、Promise、Array 或 Iterable

Posted 2023-03-07

【中文标题】Angular5：TypeError：您在预期流的位置提供了“未定义”。您可以提供 Observable、Promise、Array 或 Iterable

【英文标题】：Angular5 : TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

【发布时间】：2018-09-07 07:31:50

【问题描述】：

我尝试使用 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(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：您在预期流的位置提供了“未定义”。您可以提供 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/运营商/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/

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

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

【问题讨论】：

是你的新HttpClient的http实例吗？

这是我的导入：import HttpClient,HttpHeaders from '@angular/common/http';

所以在您的 chrome 的网络调试器中，您没有看到请求发送到服务器？

我在调试器中看到没有请求发送到服务器

您找到解决方案了吗？

【参考方案1】：

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

您的代码中也有一些错误

HttpHeaders 是不可变的

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

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

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

查询参数错误

应该是 = 而不是 ?

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

组件

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

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

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

【讨论】：

我也有同样的问题。提到拦截器对我来说似乎很有趣，因为我在这里使用它们。但我不知道从哪里开始调试它们。

headers 和 headers: headers 是同一个东西

@CristianTraìna 你是对的，我编辑了我的答案。谢谢