aurelia 中 repeat.for 的绑定问题答案

【问题标题】：Binding issue in repeat.for in aureliaaurelia 中 repeat.for 的绑定问题
【发布时间】：2021-05-05 19:10:15
【问题描述】：

我有一个我填充的卡片列表，当我点击我想要获取的每张卡片并显示为该卡片显示的正确项目时。我面临的问题是，当我返回一个数组时，它没有将正确的项目绑定到特定的卡上。

这是我的 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 所示？

【问题讨论】：

标签： javascript typescript aurelia

【解决方案1】：

你的方向是正确的，但还没有完成。您应该更喜欢 aurelia 绑定基础知识而不是数组分配，这不太好，因为没有观察到数组分配。通常，当使用一组新元素填充数组时，您应该更喜欢：

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

结束

destarray = sourcearray;

因为aurelia默认观察到前者，而没有观察到后者。

在这里，我在沙箱上复制了您的代码简化版供您查看：

click here for sandbox

最好的祝愿。

【讨论】：