如何根据其他项目的结果绑定复选框

问题描述

我从以下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中以选中该复选框

解决方法

看起来就像在渲染复选框时，您正在遍历项目，然后遍历每个项目中的商店。因此，您既有商店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);
}