Angular 5按Genere类型遍历对象数组并实现点击详情更新

咱们可以通过数据分组处理和点击事件绑定来实现你要的功能：按Genere类型分类展示条目，点击编号时显示对应详情。下面分组件逻辑和HTML模板两部分来调整：

第一步：组件代码调整 #

先在组件类里新增两个变量，用来处理分组数据和选中的条目，然后在订阅数据时完成分组：

// 组件类中定义变量
groupedCategories: { [key: string]: any[] } = {}; // 按genere分组后的Category数据
selectedItem: any = null; // 存储用户点击的条目详情

// 订阅数据并处理分组
this.myService.getDetails(id).subscribe(data => {
  this.resp = data;
  // 用reduce方法把Category数组按genere分组
  this.groupedCategories = data.Category.reduce((groups, item) => {
    // 统一转小写，避免Type1/type1这种大小写差异导致的分组错误
    const genereKey = item.genere.toLowerCase();
    if (!groups[genereKey]) {
      groups[genereKey] = [];
    }
    groups[genereKey].push(item);
    return groups;
  }, {});
  console.log(JSON.stringify(this.resp));
});

// 点击条目时触发的方法
onItemClick(item: any) {
  this.selectedItem = item;
}

第二步：HTML模板调整 #

修改模板，先展示Book的基础信息，再按分组后的genere遍历展示条目，最后添加选中详情的展示区域：

<div class="panel-group" id="accordion">
  <!-- Book基础信息面板 -->
  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne">
          Book
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        <p>编号：{{resp?.bookNumber}}</p>
        <p>标题：{{resp?.title}}</p>
        <p>发布日期：{{resp?.published}}</p>
        <p>作者：{{resp?.author?.authorname}}</p>
        <p>描述：{{resp?.Desc}}</p>
      </div>
    </div>
  </div>

  <!-- Documents分类面板 -->
  <div class="panel panel-default" id="panel2">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo" class="collapsed">
          Documents
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        <!-- 遍历每个genere分组 -->
        <div *ngFor="let genere of Object.keys(groupedCategories)" class="col-md-6">
          <h5>{{genere.charAt(0).toUpperCase() + genere.slice(1)}}</h5>
          <ul class="list-unstyled">
            <!-- 展示当前genere下的所有条目，点击时触发详情展示 -->
            <li *ngFor="let item of groupedCategories[genere]" 
                (click)="onItemClick(item)" 
                style="cursor: pointer; padding: 4px 0; border-bottom: 1px solid #eee;">
              编号：{{item.number}} | 分区：{{item.sesction}}
            </li>
          </ul>
        </div>

        <!-- 选中条目的详情展示 -->
        <div *ngIf="selectedItem" class="mt-4 p-3 bg-light rounded">
          <h5>选中条目详情</h5>
          <p><strong>类型：</strong>{{selectedItem.genere}}</p>
          <p><strong>编号：</strong>{{selectedItem.number}}</p>
          <p><strong>分区：</strong>{{selectedItem.sesction}}</p>
        </div>
      </div>
    </div>
  </div>
</div>

关键细节说明 #

• 数据分组：用Array.reduce把Category数组按genere归类，避免在模板里写复杂的条件判断，让代码更清晰。
• 安全导航符?.：访问resp的属性时加?.，防止数据未加载完成时出现空指针报错。
• 点击交互：通过(click)绑定方法，把点击的条目赋值给selectedItem，再用*ngIf控制详情区域的显示/隐藏。

这样调整后，就能完美实现你要的效果：按类型分别展示条目，点击编号即可查看对应条目的完整详情。

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