来自 mockAPI 的数据未在 Angular 8 UI 中正确显示

Question

我有一个 mockAPI，它可以正确获取数据。 json响应复杂，类型为：

    [
  {
    "planList": [
      {
        "memberCost": {
          "memberResponsibility": "342",
          "totalCostofOwnership": "35",
          "serviceCategory": [
            {
              "benefitCategoryId": "63GD",
              "cost": "A,B,C",
              "benefitCategoryNm": "Alphabets",
              "providerNetwork": "ASKEE"
            },
            {
              "benefitCategoryId": "63GD",
              "cost": "876",
              "benefitCategoryNm": "Numbers",
              "providerNetwork": "1,2,3"
            }
          ]
        },
        "oopRemaining": "83",
        "planId": "1",
        "planName": "P1",
        "planPaidAmnt": "44",
      },
      {
        "memberCost": {
          "memberResponsibility": "97",
          "totalCostofOwnership": "23",
          "serviceCategory": [
            {
              "benefitCategoryId": "FJ87",
              "cost": "Left, Right",
              "benefitCategoryNm": "Directions",
              "providerNetwork": "JSKE"
            }
          ]
        },
        "oopRemaining": "12",
        "planId": "2",
        "planName": "P2",
        "planPaidAmnt": "74",
      },
      {
        "memberCost": {
          "memberResponsibility": "22",
          "totalCostofOwnership": "7",
          "serviceCategory": [
            {
              "benefitCategoryId": "78D3",
              "cost": "Jan, Feb",
              "benefitCategoryNm": "Months",
              "providerNetwork": "OPD7"
            }
          ]
        },
        "oopRemaining": "12",
        "planId": "3",
        "planName": "P3",
        "planPaidAmnt": "89",
      }
    ]
  }
]

现在 UI 中的所有信息都正确显示，除了 serviceCategory[] 数组。在 UI 中，我有 3 张卡片。每张卡片都有一个类别选项。对于第一张卡片，它应该显示第一个对象的 serviceCategory 详细信息，依此类推。但它会显示每张卡片下的所有 serviceCategory 详细信息。示例：第一张卡片应仅在类别列下显示字母：ABC 和数字 123，第二张卡片应显示向左向右方向，第三张卡片应显示一月、二月。但它在类别列下显示字母、数字、方向和月份每张卡片。

我附上了一个堆栈闪电战。 https://stackblitz.com/edit/angular-ivy-citshn?file=src%2Fapp%2Fapp.component.html

感谢您的帮助。

Answer 1

似乎内部 ngFor 没有循环正确的数据。 你在模板中写了<ul class="collapse list-unstyled" id="serviceCategoryMenu{{i}}" *ngFor="let sCD of serviceDetails; let j = index">。

在这里，您尝试循环遍历serviceDetails，它将始终是serviceCategories 的整个列表。所有卡片都使用相同的变量，因此所有卡片自然会有相同的输出。

一种选择是更改您在serviceDetails 中存储数据的方式，并使其成为一个对象，其中键作为planId，值是关联serviceCategories 的数组。然后，您可以遍历serviceDetails[details.id]，这将为您提供所需的输出。

您可以通过省略第三个循环来做到这一点，并使您的代码如下所示：

.subscribe(
 (res: any) => {
   this.serviceDetails = {};
   for (let i = 0; i < res.length; i ++){
     for (let j = 0; j < res[i].planComparisonResultList.length; j ++) {
       let id=res[i].planComparisonResultList[j].id;
       this.serviceDetails[id]=res[i].planComparisonResultList[j].memberCost.serviceCategory
      // for ( let k = 0; k < res[i].planComparisonResultList[j].memberCost.serviceCategory.length; k ++) {
      // this.serviceDetails[id].push(res[i].planComparisonResultList[j].memberCost.serviceCategory[k]);
      // }
      if (j < 3) {
          this.uptoThreePlans.push(res[i].planComparisonResultList[j]);
            this.plans = this.uptoThreePlans;
            this.onePage = true;
            this.twoPages = false;
            this.threePages = false;                          
        }               
      else if ((j >= 3) && (j <6)) {
        this.uptoSixPlans.push(res[i].planComparisonResultList[j]);
        this.onePage = false;
        this.twoPages = true;
        this.threePages = false;
      }
      else {
        this.uptoNinePlans.push(res[i].planComparisonResultList[j]);
        this.onePage = false;
        this.twoPages = false;
        this.threePages = true;
      }
      }
     }       
   })
   

更新： 添加更改的说明。 早些时候，操作serviceDetails 的代码最终会成为一个包含所有可用serviceCategories 的数组。如前所述，将其用作卡片的输入会导致所有卡片都具有相同的数据，因为它们都引用了模板中的相同变量。

为了避免这种情况，我们现在在 {id:[categories]} 形式的对象上创建了 serviceDetails，其中 id 是该计划的唯一 ID，其值是该计划可用的类别数组。计划名称也可以用作键，只要它始终是唯一的。

由于值总是一个数组，我们可以使用像ngFor 这样的指令来循环它。要访问该数组，我们只需调用serviceDetails[id]。由于 id 存在于模板中创建的 details 变量中，我们可以通过serviceDetails[details.id] 引用每个计划的类别数组。这可确保我们在生成视图时仅获取该特定计划的类别。

Answer 2

嘿，您不需要制作 serviceDetails 数组并再次对其进行迭代，只需继续上面的数组即详细信息，因此您只需替换此行

<ul class="collapse list-unstyled" id="serviceCategoryMenu{{i}}" *ngFor="let sCD of serviceDetails; let j = index">

有了这个：

<ul class="collapse list-unstyled" id="serviceCategoryMenu{{i}}" *ngFor="let sCD of details.memberCost.serviceCategory; let j = index">
          

它会起作用的。我已经测试过了！！祝你好运