Angular 10卡片叠加展示问题：未按列表ID区分匹配对应卡片

• 你当前把所有列表对应的卡片数据都存在全局变量customersy中，每次请求不同列表ID的卡片接口时，都会直接覆盖customersy的值，所以最终页面只会展示最后一次请求返回的卡片数据，无法按列表分组展示。

第一步：修改TS代码，按列表存储卡片 #

不要把所有卡片都存在全局的customersy，而是给每个列表对象新增cards属性存储对应列表的卡片：

ngOnInit(){
  this.route.paramMap.pipe(map((param: ParamMap) => {
    // @ts-ignore
    return param.params.id;
  }))
  .subscribe(prodId => {
    this.id = prodId;
    console.log("Titulo de Proyecto", prodId)
    this.API.getNombreProyecto(this.id).subscribe(prod => {
      this.project = prod;
    });  

    // 拿到项目ID后再请求列表数据，避免id未赋值的时序问题
    this.API.getListas(this.id)
    .subscribe((data: Customer[]) => {
      this.customersx = data;
      console.log('Obtener Listas:::', this.customersx);
      data.forEach((element , i) => {
        this.API.getCards(element.id )
        .subscribe((data2: any) => {
          // 把卡片赋值给对应列表的cards属性，而不是全局变量
          element.cards = data2;
          console.log(`列表${element.id}的卡片数据`, data2)
        });  
      });            
    }); 
  }); 
}

注：如果你的Customer类型没有定义cards属性，可以先在类型定义中新增可选属性cards?: any[]，避免TS类型报错。

第二步：修改HTML代码，按列表分组循环卡片 #

你原来的代码外层肯定有对列表数据customersx的循环，在内层循环对应列表的cards属性即可：

<!-- 外层是你原来的列表循环，遍历所有列表 -->
<div *ngFor="let list of customersx" class="px-4 pb-4" >
  <!-- 内层循环当前列表对应的卡片 -->
  <div (click)="open(board, list, card)" 
       *ngFor="let card of list.cards;  index as indexOfelement;"
       class="scrumboard-card card w-full cursor-pointer overflow-hidden"
  >
  <!--   
    <div *ngIf="card.cover" class="w-full h-40 overflow-hidden">
       <img [src]="card.cover.path" class="object-cover w-full h-full">
    </div> -->

  <div class="p-4" >
     <div class="mb-2" fxLayout="row" fxLayoutGap="8px">
        <div
           [ngClass]="{
            'bg-amber': card.label_color === 'High Priority', 
            'bg-red': card.label_color === 'Blocked', 
            'bg-green': card.label_color === 'Approved' , 
            'bg-cyan': card.label_color === 'Ready', 
            'bg-purple': card.label_color === 'Deployed'}"
            class="label "
            fxFlex >
         </div>
      </div> 
      <p class="body-2 m-0 select-none" >{{  card.name  }}</p>
    </div>
  </div>
</div>

• 你当前的代码存在多层嵌套订阅的问题，后续可以用switchMap、forkJoin等RxJS操作符优化，同时建议添加订阅销毁逻辑，避免内存泄漏。
• 可以在列表卡片加载完成前添加loading状态，提升用户体验。

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