[英]ERROR Error: “[object Object]” in Angular 7
I am trying to post data to API via angular 7 but getting the below error when clicked on register click. 我试图通过angular 7将数据发布到API,但是单击注册单击时出现以下错误。
This is my app.module.ts file 这是我的app.module.ts文件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// Component
import { LoginComponent} from './Login/login.component';
import { RegComponent } from './Reg/reg.component';
import { HeaderComponent } from './header/header.component';
// Material Component
import { HttpModule } from '@angular/http'; //NEW
import {BrowserAnimationsModule} from '@angular/platform-
browser/animations';
import {MatInputModule, MatOptionModule, MatSelectModule,
MatIconModule} from '@angular/material';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTabsModule} from '@angular/material/tabs';
import {MatDividerModule} from '@angular/material/divider';
import {MatButtonModule} from '@angular/material/button';
// services
import { UserService } from './services/reg.service';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
RegComponent,
HeaderComponent
],
imports: [
HttpModule,
BrowserModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule,
MatInputModule, MatOptionModule, MatSelectModule, MatIconModule,
MatTabsModule, MatToolbarModule, MatDividerModule,
MatButtonModule, MatSelectModule
],
providers: [UserService],
bootstrap: [AppComponent]
})
export class AppModule { }
This is my registration service file reg.service.ts 这是我的注册服务文件reg.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class UserService {
constructor(private http: HttpClient) { }
create(userdata: any): Observable<Object> {
return this.http.post('/api/users', userdata);
}
}
and below is my component file for reg.component.ts 以下是我的reg.component.ts组件文件
import { Component } from '@angular/core';
import { UserService } from '../services/reg.service';
import { VERSION } from '@angular/core';
@Component({
// selector: '<app-reg>',
templateUrl: 'reg.component.html'
})
export class RegComponent {
constructor(
private userService: UserService,
) { }
register(event: any) {
this.userService.create(event.target.username.value)
.subscribe(
data => {
console.log('success');
},
error => {
console.log('Error');
});
}
}
Please provide some solution. 请提供一些解决方案。
https://github.com/akshay-champavat/angular https://github.com/akshay-champavat/angular
This is my repository link, you can check the whole code here. 这是我的存储库链接,您可以在此处检查整个代码。
In your app.module change this: 在您的app.module中更改以下内容:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// Component
import { LoginComponent} from './Login/login.component';
import { RegComponent } from './Reg/reg.component';
import { HeaderComponent } from './header/header.component';
// Material Component
import { HttpModule } from '@angular/http'; //NEW
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatInputModule, MatOptionModule, MatSelectModule, MatIconModule} from '@angular/material';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTabsModule} from '@angular/material/tabs';
import {MatDividerModule} from '@angular/material/divider';
import {MatButtonModule} from '@angular/material/button';
// services
import { UserService } from './services/reg.service';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
RegComponent,
HeaderComponent
],
imports: [
HttpClientModule,
BrowserModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule,
MatInputModule, MatOptionModule, MatSelectModule, MatIconModule, MatTabsModule, MatToolbarModule, MatDividerModule,
MatButtonModule, MatSelectModule
],
providers: [UserService],
bootstrap: [AppComponent]
})
export class AppModule { }
Change HttpModule by HttpClientModule 通过HttpClientModule 更改HttpModule
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.