Angular 5循环遍历对象数组

Question

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

{
    "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...etc)遍历类别数组，并在用户单击number时更新每个项目的详细信息？

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

​

还请确保您采用了某些关于变量、名称等的编码约定。您共享的代码充满了打字错误和空格等，这真的很危险；)

另外:如果你想只显示某些类别，这实际上取决于你是否希望用户能够过滤数据，或者这取决于你的应用程序。

如果只是应用程序，只需使用*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/

Answer 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