带有ngfor的复选框

Question

我有一个正在循环的组件。当我单击一个（app-product-card）时，我希望其相应的复选框为true或已选中。我怎么做？我有这个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;}