Angular 角度5通过对象数组循环

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

{
    "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"
    }]
}

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

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

在组件上，我订阅了服务中的可观察项，如下所示：

{
    "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"
    }]
}

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

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

在HTML中：

我使用*ngFor循环响应，如下所示：

{
    "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"
    }]
}

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

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

{{bookNumber}}
……等等
//在这里，我如何提取基于泛型类型的项，例如Type1{{Type1泛型的项}{{}}
//Type2{{Type2 genere的项目}}
我想单独显示每个世代的详细信息，并在选择时更新，例如，当我单击编号2331时，获取该对象的详细信息，对于4302359也是如此

---

如何根据一般类型（1,2…等）循环类别数组，并在用户单击数字后更新每个项目的详细信息？

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

---

您可以使用GroupBy来完成此操作

GroupBy管道返回键/值对的对象

您需要先安装ngx管道，安装过程：

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

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

{{item[0]}
{{i.number}，{{i.sesection}

为了便于参考，您可以在此处查看类似内容：

---

尝试将来自服务器的数据转换为适合您的数据结构。@Anistisaoui，您能提供一个示例吗？：）编辑文章并提供更多解释。我不明白为什么您订阅并获取数据，然后将其分配给this.resp，但随后您记录了我一无所知的this.items。谢谢，我编辑了console.log，这是错误的…我订阅了observable，然后将其分配给this.resp以迭代对象。您提供的对象是服务器的完整响应吗？或者是其中的一部分？谢谢，这个建议是在我申请之后提出的。按照Anis的建议过滤响应？你可以跳过过滤，就像*ngIf将创建或跳过代理模板一样。让我将此添加到回答中作为示例：非常感谢您的更新和建议：）以及您建议如何呈现每个genere类型项的详细信息（genere、number、section）？您能否分享一个您设想的UI外观的屏幕截图？根据您的代码，很难将其放在屏幕截图的顶部-这是两个单独的列表吗？UI到底是什么？如果列表是10个以上的项目怎么办？尼科如果你需要进一步的帮助，你就需要用你想要达到的结果来更新你的问题。您共享的此屏幕快照无法提供完全清晰的信息。