如何根据不同项目的结果绑定复选框答案

【问题标题】：How to bind a checkbox based on the result of a different item如何根据不同项目的结果绑定复选框
【发布时间】：2020-11-01 14:04:35
【问题描述】：

我有一个从以下 ts 函数加载到我的页面上的项目列表，如下所示

export class Test extends Component {
public Stores: Array<StoresModel> = [];
public Items: Array<ItemsModel> = [];
async GetStores() {
        let result = await //gets result from db;
        this.Stores= result.items;
    }
}

然后我将上面的结果绑定到html中如下

    <md-collection>
    <md-collection-item repeat.for="s of Stores" class="accent-text" >
<md-checkbox></md-checkbox> //how do i check this if an item is present for the given store
    ${s.title}
                                
    </md-collection-item>
    </md-collection>

这给了我如下的商店列表

Store1
Store2
Store3

this.stores 的输出如下所示

[{storeId:"11111",title:"Store1"}]
[{storeId:"00000",title:"Store2"}]
[{storeId:"12345",title:"Store3"}]
the above works fine.

我有另一个功能可以从商店中获取所有商品如下

async items() {
        let Items= await //get items;
        this.items= Items.items;
}

this.items 结果看起来像这样

[{storeId:"11111",title:"Shoes",id:"df12365"}]
[{storeId:"12345",title:"Clothes",id:"er45896"}]

现在我想在 html 页面中添加一个复选框，问题是如何检查包含项目的商店列表的复选框？

应该是这样的

[Checked] Stores1
[unchecked] stores2
[checked] stores3

我不确定如何将 this.stores 中的 StoreID 绑定到 this.items 的 storeID 以选中复选框

【问题讨论】：

标签： javascript typescript angular-material materialize aurelia

【解决方案1】：

看起来在您渲染复选框的时候，您正在循环访问项目，然后循环访问每个项目中的商店。所以你有一个商店s 和一个已知的项目。

您想查看该商店是否包含该商品，因此您查看数组Items，其中包含商店与商品的配对，并查看是否存在与当前商店和当前商品匹配的条目：

const isChecked = (store: StoresModel, item: ItemsModel) => {
    return Items.some(i => i.id === item.id && i.storeId === store.storeId);
}

或

const isCheckedId = (storeId: string, itemId: string) => {
    return Items.some(i => i.id === itemId && i.storeId === storeId);
}

【讨论】：