Angular 6:错误类型错误:无法读取未定义的属性“toLowerCase"
[英] Angular 6: ERROR TypeError: Cannot read property 'toLowerCase' of undefined
本文介绍了Angular 6:错误类型错误:无法读取未定义的属性“toLowerCase"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在创建关于用户的角度 6 的 CRUD 应用程序,当我尝试添加新用户时,出现以下错误:
这是我得到的错误:
core.js:12301 错误类型错误:无法读取未定义的属性toLowerCase"在 HttpXsrfInterceptor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfInterceptor.intercept (http.js:1718)在 HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1134)在 HttpInterceptingHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptingHandler.handle (http.js:1769)在 MergeMapSubscriber.project (http.js:974)在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)在 Observable._subscribe (scalar.js:5)在 Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)在 Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
这里是添加用户组件html:
<div class="col-md-6"><h2 class="text-center">添加用户</h2><form [formGroup]="addForm" (ngSubmit)="onSubmit()"><div class="form-group"><label for="email">电子邮件地址:</label><input type="email" formControlName="email" placeholder="Email" name="email" class="form-control" id="email">
<div class="form-group"><label for="firstName">名字:</label><input formControlName="firstName" placeholder="First Name" name="firstName" class="form-control" id="firstName">
<div class="form-group"><label for="lastName">姓氏:</label><input formControlName="lastName" placeholder="Last name" name="lastName" class="form-control" id="lastName">
<button class="btn btn-success">更新</button></表单>
这里是 ts 文件:
import { Component, OnInit } from '@angular/core';从@angular/forms"导入 {FormBuilder、FormGroup、Validators};从../service/user.service"导入{UserService};从 'rxjs/operators' 导入 {first};从 '@angular/router' 导入 {Router};@成分({选择器:'app-add-user',templateUrl: './add-user.component.html',styleUrls: ['./add-user.component.scss']})导出类 AddUserComponent 实现 OnInit {构造函数(私有formBuilder:FormBuilder,私有路由器:路由器,私有userService:UserService){}添加表单:表单组;ngOnInit() {this.addForm = this.formBuilder.group({ID: [],电子邮件:['',Validators.required],名字:['',Validators.required],姓氏:['',Validators.required]});}提交(){this.userService.createUser(this.addForm.value).订阅(数据=> {this.router.navigate(['list-user']);});}}
这里是用户服务:
import { Injectable } from '@angular/core';从'@angular/common/http' 导入 { HttpClient };从'../model/user.model'导入{用户};@Injectable({提供在:'根'})导出类 UserService {构造函数(私有http:HttpClient){}baseUrl: 'http://locahost:4200/users';获取用户(){返回 this.http.get(this.baseUrl);}getUserById(id: number) {返回 this.http.get(this.baseUrl + '/' + id);}创建用户(用户:用户){返回 this.http.post(this.baseUrl, user);}更新用户(用户:用户){return this.http.put(this.baseUrl + '/' + user.id, user);}删除用户(ID:号码){返回 this.http.delete(this.baseUrl + '/' + id);}}
我尝试了不同的方法,但无法解决问题:)
我的应用程序做错了什么?任何帮助将不胜感激,谢谢
解决方案
更改
baseUrl: 'http://locahost:4200/users';
到
baseUrl='http://locahost:4200/users';
因为 baseUrl 的类型是字符串
I am creating CRUD app in angular six about users, when I am trying to add new user I am getting the following error:
Here is the error I am getting :
core.js:12301 ERROR TypeError: Cannot read property 'toLowerCase' of undefined
at HttpXsrfInterceptor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfInterceptor.intercept (http.js:1718)
at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1134)
at HttpInterceptingHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptingHandler.handle (http.js:1769)
at MergeMapSubscriber.project (http.js:974)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at Observable._subscribe (scalar.js:5)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
Here is add user component html :
<div class="container add-user">
<div class="col-md-6">
<h2 class="text-center">Add User</h2>
<form [formGroup]="addForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" formControlName="email" placeholder="Email" name="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="firstName">First Name:</label>
<input formControlName="firstName" placeholder="First Name" name="firstName" class="form-control" id="firstName">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input formControlName="lastName" placeholder="Last name" name="lastName" class="form-control" id="lastName">
</div>
<button class="btn btn-success">Update</button>
</form>
</div>
</div>
Here is ts file:
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {UserService} from '../service/user.service';
import {first} from 'rxjs/operators';
import {Router} from '@angular/router';
@Component({
selector: 'app-add-user',
templateUrl: './add-user.component.html',
styleUrls: ['./add-user.component.scss']
})
export class AddUserComponent implements OnInit {
constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) { }
addForm: FormGroup;
ngOnInit() {
this.addForm = this.formBuilder.group({
id: [],
email: ['', Validators.required],
firstName: ['', Validators.required],
lastName: ['', Validators.required]
});
}
onSubmit() {
this.userService.createUser(this.addForm.value)
.subscribe( data => {
this.router.navigate(['list-user']);
});
}
}
here is user service:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../model/user.model';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) { }
baseUrl: 'http://locahost:4200/users';
getUsers() {
return this.http.get<User[]>(this.baseUrl);
}
getUserById(id: number) {
return this.http.get<User>(this.baseUrl + '/' + id);
}
createUser(user: User) {
return this.http.post(this.baseUrl, user);
}
updateUser(user: User) {
return this.http.put(this.baseUrl + '/' + user.id, user);
}
deleteUser(id: number) {
return this.http.delete(this.baseUrl + '/' + id);
}
}
I tried different ways but am not able to solve the issue :)
what am I doing wrong in my app? any help will be apreciated, thanks
解决方案
change the
baseUrl: 'http://locahost:4200/users';
to
baseUrl= 'http://locahost:4200/users';
since the type of baseUrl is string
这篇关于Angular 6:错误类型错误:无法读取未定义的属性“toLowerCase"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!