Angular5 httpClient get:无法读取属性'；toLowerCase'；未定义的

我试图从API获取用户列表，但出现以下错误：

TypeError: Cannot read property 'toLowerCase' of undefined
at HttpXsrfInterceptor.intercept (http.js:2482)
at HttpInterceptorHandler.handle (http.js:1796)
at HttpInterceptingHandler.handle (http.js:2547)
at MergeMapSubscriber.eval [as project] (http.js:1466)
at MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
at ScalarObservable._subscribe (ScalarObservable.js:51)
at ScalarObservable.Observable._trySubscribe (Observable.js:172)
at ScalarObservable.Observable.subscribe (Observable.js:160)

我有一个登录组件，它调用homeService.getUsers（），它使用HttpClient检索用户，但http请求从未到达服务器

login.component.ts：

import { Component, OnInit } from '@angular/core';

import { HomeService } from '../service/home.service';
import { User } from '../domain/user';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  user: User = {
      id: undefined,
      userName: undefined,
      password: undefined
  }; 
  users: User[];

  constructor(
    private homeService: HomeService
  ) { }

  ngOnInit() {
    this.getUsers();
  }

  getUsers(): void {
    this.homeService.getUsers()
    .subscribe(users => this.users = users);
  }
}

家庭服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { catchError, map, tap } from 'rxjs/operators';

import { User } from '../domain/user';
import { MessageService } from '../service/message.service';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class HomeService {

  private usersUrl: 'http://localhost:8080/users';

  constructor(
    private http: HttpClient,
    private messageService: MessageService
  ) { }

  getUsers (): Observable<User[]> {
    return this.http.get<User[]>(this.usersUrl)
      .pipe(
        tap(users => this.log(`fetched users`)),
        catchError(this.handleError('getUsers', []))
      );
  }

  /**
  * Handle Http operation that failed.
  * Let the app continue.
  * @param operation - name of the operation that failed
  * @param result - optional value to return as the observable result
  */
  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

  private log(message: string) {
    this.messageService.add(message);
  }

}

我可以看到日志中显示的错误消息，因此它似乎是来自HttpClient的错误。但在将Http请求发送到服务器之前，我无法找出它失败的原因。

我也遇到了同样的问题。 正如@Canlla所说，有必要将url变量的可见性从public更改为private

奇怪，但有什么东西正在改变它的价值！无论如何，一定是这样 二等兵，因为我们不需要用卫生棉条

此外，在我的例子中，我需要添加NgIf/NgElse以避免在加载完成之前进行数据绑定：

{{transaction.dueDate}
{{transaction.description}}

{{transaction.categoryName}


{{transaction.accountName}


{{transaction.amount}货币：'BRL'：'symbol'}

加载。。。

因此，这里：

如果

事务

已加载，则我使用带有

异步

管道的*ngIf来显示

mat列表

。 下一步

让用户
语句如果为true，则创建一个局部模板变量，该变量从可观察对象分配值

否则，
else加载
告诉Angular是否满足显示加载模板的条件

查看@coryrylan的这篇精彩文章：
我也收到了同样的问题。问题是我声明了url，但在执行httpget时，我意识到url没有分配任何值：

可能的情况：
例子：
private-yourUrl:string

在http调用中：
返回this.http.get（this.yourUrl，{headers:this.headers}）
似乎您错误地声明了一个变量，从而使其未定义：
试试这个

用于整洁的编码

interface User = {
      id: number;
      userName: string;
      password: string;
  }

user: User;

也请从中更正此行

private usersUrl: 'http://localhost:8080/users';

到

这可能是问题所在，我认为您的url声明不正确
请尝试以下方法：

private usersUrl='2〕http://localhost:8080/users';
我也遇到了类似的错误，为了解决它，我查了一下，意识到我错误地声明了URL

声明应该是这样的

private urlVariable = 'http://sampleurl.com';

问题在于您传递的URL：
private usersUrl:http://localhost:8080/users'; 

应该是这样的：
private-usersUrl:string='1〕http://localhost:8080/users';
机器人cookieName:“我的Xsrf Cookie”和headerName:“我的Xsrf头”未定义，这就是原因！但是，如果我删除导入的选项并将导入保留为“HttpClientXsrfModule”，我会不断解决错误问题，usersUrl分配不好。将其修改为：private usersUrl:string=''；fwiw：我有这个错误，修复方法是在我的服务中用记号标记url变量，例如`${url}`谢谢！而不是我的
=
我有一个
：
无法相信。我的情况也是如此。谢谢，它救了我一天谢谢这就是原因。
private usersUrl =  'http://localhost:8080/users';

private urlVariable = 'http://sampleurl.com';