複選框狀態不反映Angular 2中的ngModel值

所以我的問題是，我有一個複選框，其狀態不反映它的ngModel值。讓我來解釋一下架構：我有一個管理產品列表的服務，以及一個應該顯示這個列表並讓用戶選擇或取消選擇任何產品的組件。如果用戶取消選擇產品，並且沒有選定的產品，我嘗試重新選擇它們。但是當我這樣做時，觸發事件的複選框不會更新（圖形化，因爲它的ngModel是），而所有其他複選框都會正確更新。複選框狀態不反映Angular 2中的ngModel值

因此，這裏的服務（我用BehaviourSubject使我的組件可以聽它的變化）：

@Injectable() 
export class ProductService { 
    private productsSubject: BehaviorSubject<Array<{name: string, selected: boolean}>> 
    public products = this.productsSubject.asObservable(); 

    constructor() { 
     this.productsSubject.next([ 
      {name: 'Product 1', selected: true}, 
      {name: 'Product 2', selected: true}, 
      {name: 'Product 3', selected: true} 
     ]); 
    } 

    public select(name: string) { 
     // In this method I change "selected" for the corresponding product. 
     // if no product is selected, I select them all. 
    } 
}

這裏是組件視圖：

<li *ngFor="let product of ProductService.products | async"> 
     {{product.name}}{{product.selected}} 
     <input type="checkbox" [(ngModel)]="product.selected" (ngModelChange)="ProductService.select(product.name)"> 
</li>

對於compoenent它的自我，它除了注入ProductService之外什麼也沒做。

最後，當我運行應用程序時，一切工作正常，當我檢查並取消選中複選框，模型更新以及複選框狀態。除了在一種情況下

開始：

Product 1 -> selected: true + checkbox ticked 
Product 2 -> selected: false + checkbox not-ticked 
Product 3 -> selected: false + checkbox not-ticked

我取消的第一款產品，在「選擇」的方法做了重新選擇的所有產品的工作，我有這樣的：

Product 1 -> selected: true + checkbox **NOT-TICKED** 
Product 2 -> selected: true + checkbox ticked, 
Product 3 -> selected: true + checkbox ticked

你知道爲什麼觸發事件的複選框沒有以圖形方式更新？

非常感謝您的幫助。

來源

2017-09-05 Louis A.

您目前使用的單向數據綁定：

[ngModel]="product.selected"

使用雙向數據綁定：

[(ngModel)]="product.selected"

這樣的變化得到反映在您的UI。

來源

2017-09-05 09:45:05

WOW。這是單向數據綁定嗎？那麼'[ngModel] =「product.selected」'和'[（ngModel）] =「{{product.selected}}」之間有什麼區別？「 –

它不會改變任何內容。事實上，我的「選擇」方法是通過另一種方式進行綁定（通過恢復相關的產品選擇）。從那以後，我發現了一些提示。我有一個解決方法，通過設置服務方法的超時（這是非常可怕的）。所以也許角有時間先處理模型變更，服務變更後？ –

複選框狀態不反映Angular 2中的ngModel值

回答

相關問題