Question

我想添加表单，但它没有添加到数据库API Symfony后端和Angular Frontend中，并且在列表中也没有显示任何内容。谁知道为什么？

AddUserComponent.html：16错误 atDefaultIterableDiffer.webpackJsonp ... / .. / .. / core/@angular/core.es5.js.DefaultIterableDiffer.diff （core.es5.js：6843）在NgForOf.webpackJsonp ... / .. / .. / common/@angular/common.es5.js.NgForOf.ngDoCheck （common.es5.js：1691） at checkAndUpdateDirectiveInline（core.es5.js：10846） at checkAndUpdateNodeInline（core.es5.js：12341） at checkAndUpdateNode（core.es5.js：12284）在debugCheckAndUpdateNode（core.es5.js：13141）在debugCheckDirectivesFn（core.es5.js：13082）在Object.eval [as updateDirectives]（AddUserComponent.html：21） at Object.debugUpdateDirectives [as updateDirectives]（core.es5.js：13067） at checkAndUpdateView（core.es5.js：12251）View_AddUserComponent_0 @ AddUserComponent.html:16 proxyClass @ compiler.es5.js：14985 webpackJsonp ... / .. / .. / core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js：13407 webpackJsonp ... / .. / .. / core/@angular/core.es5.js.ErrorHandler.handleError

添加-user.components.ts

import { Component, OnInit } from '@angular/core';
import {UserService} from '../user.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.css']
})
export class AddUserComponent implements OnInit {

  username: string ;
  email: string;

  errors= [];


  constructor(private _userService: UserService , private router: Router) { }

  addUser(username, email) {

    let user: any;
    user = {username: username, email: email};
    this._userService.addUser(user).subscribe(( result => {

      this.router.navigate(['/users']);

    }), addError => this.errors = addError);

  }
  ngOnInit() {
  }
}

<form (submit)="addUser(username,email)" class="well">

<div class="form-group">
<label>username:</label>
<input type="text" class="form-control" placeholder="add username"
     [(ngModel)]="username" name="username" >
</div>

形式

 <div class="form-group">
    <label>Email:</label>
    <input type="text" class="form-control" placeholder="add email"  [(ngModel)]="email" name="email" >
  </div>



      <div *ngFor="let error of errors" class="alert alert-danger">
          <div>There is an error in :{{error.field}} field</div>
          <div>{{error.message}}</div>
        </div>

  <button type="submit" class="btn btn-primary" >Save</button>

</form>

user.service

 @Injectable()
 export class UserService {

  private uri= 'http://127.0.0.1:8000/api/users';
  constructor(private http: Http, private authenticationService: AuthService  ) {}

  getUsers(): Observable<any[]> {
    const headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });
    return  this.http.get(this.uri , {headers : headers}).map(res => <User[]> res.json() )
    .catch(this.handelError);

  }
  addUser(user: User) {
    const  headers = new Headers();
    headers.append('content-type', 'application/json');
    headers.append('Authorization', 'Bearer ' + this.authenticationService.token);
    return this.http.post(this.uri, JSON.stringify(user), {headers : headers})
    .map(res => res.json()).catch(this.handelError);
  }

user.ts

export class User {        
    constructor(public id, public username: string, public email: string) {        
      }        
}

Answer 1

您正在设置数组this.errors =到包含ERROR的变量addError，其类型可能不是数组。

尝试更改：

addError => this.errors = addError

要：

addError => this.errors.push(addError)

我还要将函数重新格式化为：

this._userService.addUser(user).subscribe(
  result => this.router.navigate(['/users']),
  err => this.errors.push(err)
);

错误：尝试差异时出错＆gt; ＆＃39;类型错误＆＃39 ;.只允许数组和可迭代

1 个答案: