Angular 5循环遍历对象数组答案

【问题标题】：Angular 5 Looping through array of objectsAngular 5循环遍历对象数组
【发布时间】：2018-09-26 02:36:55
【问题描述】：

我有一个服务器响应，由一个对象和对象数组组成，如下所示：

{
    "bookNumber": "123214",
    "Desc": "book desc",
    "title": "title here",
    "published": "12/01/2016",
    "author": {
        "authorname": "VictorA"
    },

    "Category": [{
        "genere": "Type1",
        "number": "2331",
        "sesction": "Fiction"
    }, {
        "genere": "type2",
        "number": "430359",
        "sesction": "Kids"
    }, {
        "genere": "type2",
        "number": "436430",
        "sesction": "Kids"
    }, {
        "genere": "type2",
        "number": "123914",
        "sesction": "Kids"
    }],

    "Publisher": [{
        "name": "Pubbook",
        "pubId": "81.25402-0233",
        "lastModified": "2012-02-09"
    }]
}

在组件上，我从服务订阅 Observable，如下所示：

this.myService.getDetails(id).subscribe (data => {  
      this.resp = data;
      console.log (JSON.stringify(this.resp));
    })

在 HTML 中：

我使用 *ngFor 来循环响应如下：

<div class="panel-group" id="accordion">
    <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"></div>
            {{bookNumber}}
            ...so on
        </div>
    </div>
    <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" *ngFor = "let item of resp.Category"></div>
            // here How can I  extract items based on genere type e.g. Type1 <div col="md-6"> {{items of Type1 genere}} {{}}</div>
            //  Type2 <div col="md-6">{{items of Type2 genere}}</div>

            I want to display details of each Genere in separately and update on selection for e.g. when i click Number 2331 get details of that object, and same for 4302359
        </div>
    </div>

</div>

如何根据Genere Type(1,2...等)循环Category数组，并在用户点击数字后更新每个项目的详细信息？

【问题讨论】：

尝试将来自您服务器的数据转换为适合您的数据结构。
@AnisTissaoui，你能举个例子吗？ :)
编辑帖子并提供更多解释。我不明白您为什么订阅并获取数据，然后将其分配给 this.resp，但随后您记录了我一无所知的 this.items。
谢谢，我编辑了console.log，它是错误的...我订阅了observable，然后将它分配给this.resp以迭代对象
你提供的对象是服务器的完整响应吗？还是其中的一部分？

标签： angular

【解决方案1】：

您需要利用 *ngIf 指令来呈现特定模板，然后通过您的方法在点击/点击时传递项目数据：

<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body" *ngFor="let item of resp.Category" (click)="itemTapped(item)">
      <div *ngIf="item.type ==='Type1'"></div>
      <div *ngIf="item.type ==='Type2'"></div>
  </div>
</div>

还请确保您采用某些关于 var 名称等的编码约定。您共享的代码中充满了拼写错误和空格等，这确实很危险；)

另外：如果您只想显示某些类别，这实际上取决于您是希望用户能够过滤数据还是取决于您的应用。

如果只是应用程序，只需使用 *ngIf 条件渲染您想要的内容。

<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body" *ngFor="let item of resp.Category" (click)="itemTapped(item)">
      <div *ngIf="item.type ==='Type1'"></div>
  </div>
</div>

如果它由用户控制 - 描述您的特定用户体验。我会推荐这篇文章：https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/

【讨论】：

谢谢，该建议是在我将 .filter 应用于 Anis 上面建议的响应之后？
您实际上可以跳过过滤器，因为 *ngIf 将创建或跳过委托模板。让我将此作为示例添加到答案中
非常感谢您的更新和建议 :) 以及您建议如何呈现每个流派类型项目的详细信息（流派、编号、部分）？
您能分享一张您设想的 UI 外观的屏幕截图吗？根据你的代码很难得到它
所以屏幕截图的上半部分 - 只有 2 个单独的列表，该 UI 到底是什么？如果列表是 10 多个项目怎么办？ Nico 如果您需要进一步的帮助，您真的需要用您想要达到的预期结果来更新您的问题。您分享的这个屏幕截图不完全清楚。

【解决方案2】：

您可以使用 GroupBy 来做到这一点。

GroupBy 管道返回一个键/值对的对象。 https://github.com/danrevah/ngx-pipes#groupby

需要先安装ngx-pipes，安装过程：https://github.com/danrevah/ngx-pipes#installation

以下是非常适合您的数据结构的示例代码：

 <div class="panel-body" *ngFor="let item; of resp.Category | groupBy: 'genere' | pairs">
   <h2> {{item[0]}}</h2>
   <div col="md-6" *ngFor="let i of item[1]">
     {{i.number}}, {{i.sesction}}
   </div>
 </div>

作为参考，您可以在此处查看类似的内容： https://github.com/danrevah/ngx-pipes/issues/33#issuecomment-284863058

【讨论】：