Javascript 错误："；[对象对象]”；角度7

我试图通过angular 7将数据发布到API，但在单击register click时出现以下错误

这是我的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 { }

这是我的注册服务文件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);
   }


}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{Observable}；
@可注射（）
导出类用户服务{
构造函数（私有http:HttpClient）{}
创建（userdata:any）：可观察{
返回此.http.post（'/api/users'，userdata）；
}
}

下面是我的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');
            });
    }
}

从'@angular/core'导入{Component}；
从“../services/reg.service”导入{UserService}；
从'@angular/core'导入{VERSION}；
@组成部分({
//选择器：'

这是我的存储库链接，您可以在此处检查整个代码。
在您的应用程序中。更改此模块：

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 { }


更改HttpModule通过HttpClientModule
尝试使用chrome浏览器打开角度项目，角度异常会更加明确。您可能能够捕获错误。