Aurelia中repeat.for绑定错配，点击分组卡片无法展示对应分类条目

基础说明 #

• 已实现功能：一组可动态填充的卡片列表，预设需求为点击任意卡片时，加载并展示该卡片关联的对应条目列表
• 现存问题：接口返回条目数组后，无法将正确的条目绑定到指定的对应卡片上

现有实现代码 #

页面模板代码 #

<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>

交互逻辑代码 #

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的返回数组结构为：

[
    { name: "Clothes", items: Array(3) },
    { name: "Shoes", items: Array(2) }
]

效果对比 #

• 初始加载状态：页面初始加载时可正确渲染所有分组卡片
  
• 预期交互状态：点击“Clothes”卡片时，仅展示与Clothes关联的条目数组；点击“Shoes”卡片时，仅展示与Shoes关联的条目数组
  
• 实际问题状态：按照当前代码运行，无论点击哪个卡片，条目内容都会出现错配，无法与对应的分组卡片匹配
  

核心疑问 #

目前用于条目绑定的核心代码为 repeat.for="item of categoryItemsTypes.items"，需要调整绑定逻辑，让条目正确绑定到对应名称的分组卡片下，实现预期的展示效果。

内容的提问来源于stack exchange，提问作者user14241810