오류 : 'TypeError'를 (를) diff하는 동안 오류가 발생했습니다. 배열과 iterable 만 허용됩니다.

Question

폼을 추가하고 싶지만 데이터베이스 API에 추가되지 않았습니다. Symfony 백엔드와 각도 프런트 엔드 및 목록에 아무것도 표시되지 않습니다. 왜 그런지 알아?

AddUserComponent.html:16 ERROR atDefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.diff (core.es5.js:6843) at 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) at debugCheckAndUpdateNode (core.es5.js:13141) at debugCheckDirectivesFn (core.es5.js:13082) at 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); 
    } 

01,235 16,

user.ts 유형의 오류를 포함하는 변수 addError-

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

Answer 1

귀하가 설정되고, 배열 this.errors= 아마 배열이 아닙니다.

한번에 변경 :

addError => this.errors = addError 

에 : 나는 또한 기능을 포맷 할

addError => this.errors.push(addError) 

같이하기 :

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