Блог

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

Это мой HTML

 <div repeat.for="Grouping of categoryItems">
                    <div class="row">
                        <div class="col s12 m3 l3">
                            <div class="card blue-grey darken-1">
                                <div class="card-content" style="padding:10px">
                                    <span class="card-title white-text truncate">${Grouping.name}</span>
                                    <a if.bind="Grouping.hideDetails" class="btn-floating halfway-fab waves-effect waves-light" click.delegate="Activate(list, Grouping)"><i class="material-icons">add</i></a>                                     
                                </div>
                            </div>
                        </div>
                    </div>
                    <div repeat.for="categoryGroupingTypes of categoryItemTypes">
                        <div class="row" if.bind="!Grouping.hideDetails">


                            
                            <div class="col" style="position:absolute;padding:5%">
                                <div class="rotate-text-90-negative">
                                    <span class="blue-grey-text"><b>${categoryGroupingTypes.name}</b></span>
                                </div>

                            </div>
                            <div repeat.for="item of categoryItemsTypes.items" class="col s12 m3 l3 ">
                                
                                    <div class="card-content">
                                        <span class="card-title white-text truncate">${items.Name} ${items.Quantity}</span>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>                  
                     </div>
 

мой ts

 async Activate(list: ListModel[], grouping: any) {
            
        this.categoryItemsTypes = await this.getTypes(list);
        let result = this.categoryItem.filter(x => x.name == grouping.name)
        if (result) {
            grouping.hideDetails = false;
        }
            
    }
 

итак, this.categoryItemsTypes имеет следующий массив

 0: {name: "Clothes", items: Array(3)}
1: {name: "Shoes", items: Array(2)}
 

итак, когда страница загружается, она загружает карты следующим образом

затем, когда я нажимаю на «Одежду», я хочу, чтобы он загружал только массив, связанный с одеждой, и если нажимается «обувь», тогда загружается только этот массив следующим образом

но то, что в настоящее время происходит с моим приведенным выше кодом, заключается в следующем

в этой строке я связываю элементы

 repeat.for="item of categoryItemsTypes.items"
 

как я могу привязать элементы к правильному $ {Grouping.name } как показано на рисунке 2?

Вы в правильном направлении, но еще не завершены. Вы должны предпочесть основы привязки aurelia назначению массива, что работает не совсем хорошо, потому что назначения массива не соблюдаются. В общем, при заполнении массивов новым набором элементов вы должны предпочесть:

destarray.splice(0, destarray.length, ...sourcearray);

более

destarray = sourcearray;

потому что первое наблюдается aurelia по умолчанию, а второе — нет.

Здесь я воспроизвел упрощение вашего кода в изолированной среде, чтобы вы могли проверить:

нажмите здесь для песочницы

Наилучшие пожелания.