Блог

у меня есть список элементов, загруженных на мою страницу из следующей функции 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 к идентификатору хранилища this.items, чтобы установить флажок

Похоже, что в тот момент, когда вы отображаете флажок, вы перебираете элементы, а затем перебираете магазины внутри каждого элемента. Итак, у вас есть как хранилище s , так и элемент, которые известны.

Вы хотите посмотреть, содержит ли это хранилище этот элемент, поэтому просматриваете массив Items , который содержит пары хранилищ с элементами, и смотрите, существует ли запись, которая соответствует как текущему хранилищу, так и текущему элементу:

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

или

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