幅增頻雙向數據綁定形式的異常

Question

嗨，我讓我的表格上看到以下錯誤

EXCEPTION: Expression has changed after it was checked. Previous value: 'Advertising'. Current value: 'Contractors'. 

這裏是我的HTML表單

<form [formGroup]='billTypesForm' (ngSubmit)="submitForm(billTypesForm.value)"> 

    <table> 
     <thead> 
     <tr> 
     <th>name</th> 
     <th>percentage</th> 
     <th>out of scope</th> 
     <th>Edit</th> 
     </tr> 
     </thead> 
     <tbody> 

     <tr *ngFor='let billType of billTypes; let i = index'> 

     <input type="hidden" name="id" [(ngModel)]="billType.id" [formControl]="billTypesForm.controls['id']" /> 

     <td class="name"> 
      <div class="input-field"> 
      <input type="text" name="name" placeholder="Name" [(ngModel)]="billType.name" [formControl]="billTypesForm.controls['name']" /> 
      </div> 
     </td> 

     <td class="percentage"> 
      <div class="input-field"> 
      <input type="text" name="percentage" [(ngModel)]="billType.percentage" readonly placeholder="Tax" [formControl]="billTypesForm.controls['percentage']" /> 
      </div> 
     </td> 
     <td class="outOfScope"> 
      <input type="checkbox" name="outOfScope" [(ngModel)]="billType.outOfScope" [formControl]="billTypesForm.controls['outOfScope']" /> 
     </td> 

     <input type="hidden" name="active" [(ngModel)]="billType.active" [formControl]="billTypesForm.controls['active']" /> 

     <td class="edit" onclick="deleteBillTypeRow($(this));"> 
      <i class="material-icons">mode_edit</i> 
     </td> 

     </tr> 
     </tbody> 
    </table> 
    </form> 

這個問題似乎是大約[（ngModel）] =」 billType.name」，在輸入文本框

這裏是我的組件

import {Component, OnInit, AfterViewInit, AfterContentChecked, Input} from '@angular/core'; 

import {FormBuilder, FormGroup} from '@angular/forms' 
import {BillTypesDataService} from './bill-types-data.service' 
import {BillTypes} from "./bill-types"; 

@Component({ 
    selector: 'brightbook-bill-types', 
    templateUrl: './bill-types.component.html', 
    styleUrls: ['./bill-types.component.css'], 
}) 
export class BillTypesComponent implements OnInit { 

    billTypesForm : FormGroup; 
    public billTypes: BillTypes; 

    constructor(private billTypesService: BillTypesDataService, fb: FormBuilder) { 
    this.billTypesForm = fb.group({ 
     'id':[''], 
     'name':[''], 
     'percentage':[''], 
     'outOfScope':[''], 
     'active':[''] 

    }); 
    } 

    ngOnInit() { 
    this.billTypesService.getBillTypes() 
    .subscribe(
     (res:BillTypes) => this.billTypes = res, 
     error => console.log(<any>error) 
    ); 
    } 

，這裏是我的服務

import { Injectable } from '@angular/core'; 
import {Http, Response, Request, RequestMethod} from '@angular/http'; 
import {BillTypes} from './bill-types' 

import {Observable} from "rxjs"; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class BillTypesDataService { 

    private billTypesUrl = '/settings/bill-types/json'; 

    billTypes: BillTypes[] = []; 

    constructor(public http: Http) { 
    } 

    getBillTypes() { 
    return this.http.get(this.billTypesUrl) 
     .map(res => <BillTypes[]> res.json()) 
     .catch(this.handleError); 
    } 

    private handleError (error: Response) { 
    return Observable.throw('Internal server error'); 
    } 

} 

這是我從終點呼叫

[ 
    { 
    "id": null, 
    "name": "Advertising", 
    "percentage": 0.5, 
    "outOfScope": false, 
    "active": true, 
    "created": null 
    }, 
    { 
    "id": null, 
    "name": "Car & Truck Expenses", 
    "percentage": 1, 
    "outOfScope": false, 
    "active": true, 
    "created": null 
    }, 
    { 
    "id": null, 
    "name": "Contractors", 
    "percentage": 0, 
    "outOfScope": false, 
    "active": true, 
    "created": null 
    } 
] 

我有一個看起來像這樣

export class BillTypes { 
    constructor(
    public id:string, 
    public name:string, 
    public percentage:number, 
    public outOfScope:boolean, 
    public active:boolean, 
    public dateCreate:string, 
){} 
} 

模型類找回了JSON

如果任何人都可以提供幫助，將非常感謝提前。

Answer 1

我假設你的表格變得瘋狂了。您爲每個字段this.billTypesForm = fb.group({})創建了1個實例，然後對每行使用相同的字段。嘗試爲每一行創建新formGroup ...

更新：

@Component({ 
    selector: 'brightbook-bill-types', 
    templateUrl: './bill-types.component.html', 
    styleUrls: ['./bill-types.component.css'], 
}) 
export class BillTypesComponent implements OnInit { 

    public billTypes: BillTypes; 

    constructor(private billTypesService: BillTypesDataService){} 

    ngOnInit() { 
     this.billTypesService.getBillTypes() 
     .subscribe(
      (res:BillTypes) => this.billTypes = res, 
      error => console.log(<any>error) 
     ); 
    } 
} 

@Component({ 
    selector: 'brightbook-bill-item', 
    templateUrl: './bill-item.component.html' 
}) 
export class BrItem{ 

    billTypesForm : FormGroup; 

    @Input()billType: BillType; 

    constructor(fb: FormBuilder){ 
     this.billTypesForm = fb.group({ 
      'id':[''], 
      'name':[''], 
      'percentage':[''], 
      'outOfScope':[''], 
      'active':[''] 
     }); 
    } 
} 

賬單item.component.html

<tr> 
<form [formGroup]='billTypesForm' (ngSubmit)="submitForm(billTypesForm.value)"> 
    <input type="hidden" name="id" [(ngModel)]="billType.id" [formControl]="billTypesForm.controls['id']" /> 

     <td class="name"> 
      <div class="input-field"> 
      <input type="text" name="name" placeholder="Name" [(ngModel)]="billType.name" [formControl]="billTypesForm.controls['name']" /> 
      </div> 
     </td> 

     <td class="percentage"> 
      <div class="input-field"> 
      <input type="text" name="percentage" [(ngModel)]="billType.percentage" readonly placeholder="Tax" [formControl]="billTypesForm.controls['percentage']" /> 
      </div> 
     </td> 
    ... 
</form> 
</tr> 

賬單types.component.html

<table> 
    <thead> 
    <tr> 
    <th>name</th> 
    <th>percentage</th> 
    <th>out of scope</th> 
    <th>Edit</th> 
    </tr> 
    </thead> 
    <tbody> 
    <bill-item [billType]="billType" *ngFor='let billType of billTypes;'></bill-item> 
    </tbody> 
</table>