複選框與ngfor

Question

我有一個組件正在for-loop。當我點擊一個（app-product-card）時，我希望其對應的複選框爲真或檢查。我怎麼做？我有這樣的HTML

<div class="list-content fluid"> 
    <div class="products-cards" *ngFor="let product of dataSource['docs']"> 
     <div class="ui checkbox"> 
      <input class="singleCheckbox" type="checkbox" [checked]="product"> 
      <label hidden></label> 
     </div> 
     <app-product-card [product]="product" (click)="select(product)"></app-product-card> 
    </div> 
</div> 

Answer 1

您可以使用子組件的本地參考像我一樣，如下所示：

<div class="list-content fluid"> 
    <div class="products-cards" *ngFor="let product of dataSource['docs']"> 
     <div class="ui checkbox"> 
      <input class="singleCheckbox" type="checkbox" [checked]="appProduct.product===product"> // Here you need match your currently selected product 
      <label hidden></label> 
     </div> 
     <app-product-card #appProduct [product]="product" (click)="select(product)"></app-product-card> 
    </div> 
</div> 

App Product Comp: TS 

public product; 

select(product){ this.product = product;}