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 ...等）循环使用Category数组，并在用户点击数字后更新每个项目的详细信息？

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>

还请确保您采用某些关于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/

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

Angular 5循环遍历对象数组

2 个答案: