復選框上的角度綁定不適用於模型

Question

<tr *ngFor="let item of Items" (click)="ModifyItem(item)" class="mask flex-center rgba-blue-light">
  <td>{{ item.price}}</td>
  <td>{{ item.make}}</td>
  <td>{{ item.type}}</td>
  <td>
    <input type="checkbox"   name="isSelected" [(ngModel)]="item.isSelected" [checked]="item.isSelected" ngDefaultControl [ngModelOptions]="{standalone: true}"/>
  </td>
</tr>

選中復選框時，復選框值不會改變。 我對 angular 比較陌生，所以我堅持讓 isSelected 正確綁定。 一直顯示 false，這是模型的默認值

export class FetchDataComponent {
  items: Items[];
  public item: Item= new Item(null,[],null,false);

 
  eventsSubject: Subject<boolean> = new Subject<boolean>();
  editing: Subject<boolean> = new Subject<boolean>();
  selected: Subject<Item> = new Subject<Item>();

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string ) {
    http.get<Item[]>(baseUrl + 'game').subscribe(result => {

      this.items= result;

    }, error => console.error(error));

  }

  public AddItem()
  {  
      this.eventsSubject.next();  
  }

  public ModifyItem(item: Game) {
   
    this.game = item;
   
    this.editing.next(true);
    this.selected.next(item);

  }

Answer 1

取決於里面的內容(click)="ModifyItem(Item)但我認為這會修改項目並取消復選框的點擊事件

如果不知道這個函數里面有什么，就很難說到底做了什么。

這是一個有效的stackBlitz

Answer 2

1.-刪除 [checked] 和 [ngModelOptions] - [ngModelOptions]="{standalone:true}"如果您在 FormGroup 中有使用 [(ngModel)] 的輸入，則使用 [ [ngModelOptions]="{standalone:true}"

2.-在（單擊）中，您忘記了 item.isSelect=!item.isSelect

<tr *ngFor="let item of Items" 
      (click)="item.isSelect=!item.isSelect;ModifyItem(item)">

//or add in your function
ModifyItem(item: Game){
     item.isSelect=!item.isSelect
      ...rest of your code...
} 

3.- 對我來說很奇怪你使用 Subjects 而我不知道這樣做的目的。 通常，您在服務中使用主題，因此訂閱該主題的一個或多個組件會收到更改。 如果您想在應用程序主體中同時使用兩個組件，您可以使用模板引用變量