如何使用Angular2在* ngFor循环中定位对象键

Question

在Angular 2最新的RC上下文中，我尝试使用多个选项卡构建视图。 数据来自API，我需要通过两个步骤来检索目标数据。

• 每个标签都包含手风琴组，并与categories
相关联
• 每个手风琴组都包含子弹列表并与之相关 categories[i].subtopics

这部分非常有效。

当我尝试使用来自第二个数组<li>的数据实现subTopics标记时，事情变得更加棘手。 我尝试了*ngFor="let services of subTopics的几种组合而没有成功。 有哪些选项可以显示我想要的方式（请参阅HTML模板中的评论）

我的组件HTML

<tabset>
<tab heading="{{category.name}}" *ngFor="let category of categories | orderBy" >
    <h2>Content</h2>
    <accordion>
        <accordion-group  heading="{{subtopic.name}}" *ngFor="let subtopic of category.subtopics | orderBy">
            <li>
<!-- Here is where I want to display value for each services.name key related to my subtopic. -->
           </li>
        </accordion-group>
    </accordion>
</tab>

我的categories JSON

我的categories数组结构如下所示。 检索此对象后，我迭代每个categories[index].subtopics以生成我的subTopics数组。

[{
    "code": "FIRST_CATEGORY",
    "name": "First Categories", //Tab heading
    "subtopics": [{
        "code": "CODE1",
        "name": "Name for Code 1" //Accordion group heading
    }, {
        "code": "CODE2",
        "name": "Name For Code 2" //Accordion group heading
    }]
},{
    "code": "SECOND_CATEGORY",
    "name": "Second Categories", //Tab heading
    "subtopics": [{
        "code": "CODE3",
        "name": "Name for Code 3" //Accordion group heading
    }, {
        "code": "CODE4",
        "name": "Name for Code 4" //Accordion group heading
    }]
}]

我的subTopics JSON

我的subTopics数组结构如下所示。我对它进行了简化，因为每services有很多键/值。

[{
    "subtopic": "CODE1",
    "services": [{
        "code": "755",
        "name": "The Name of My Code 755" //my <li> Tag
    }, {
        "code": "199",
        "name": "The Name of My Code 199" //my <li> Tag
    }]
}, {
    "subtopic": "CODE2",
    "services": [{
        "code": "761",
        "name": "The Name of My Code 761" //my <li> Tag
    }, {
        "code": "356",
        "name": "The Name of My Code 356" //my <li> Tag
    }]
}]

使用此函数构建此数组，code和index来自categories数组迭代。

getSubServicePerTopic(code, index){
    this._dxdService.getSubTopics(code, this.regionId)
    .subscribe(subTopics => {
        this.subTopics[index] = subTopics;
    });
}

Answer 1

我不确定你的确切问题，但这是一个讨论的起点。 ：）

将您的组件（tabset，tab，..）更改为div：

<div class="tabset">
  <div class="tab" *ngFor="let category of categories" >
      <h2>{{category.name}}</h2>

      <div class="accordion">
          <div class="accordion-group" *ngFor="let subtopic of category.subtopics">
            <h3>{{ subtopic.name }} </h3>
            <ul>
              <li *ngFor="let service of getServices(subtopic)">
                <!-- Here is where I want to display value for each services.name key related to my subtopic. -->
                {{ service.code }} : {{ service.name }}
             </li>
           </ul>
          </div>
      </div>
  </div>
</div>

getServices(subtopic) {
   let s = this.subtopics.find(st => st.subtopic == subtopic.code);
   return s ? s.services : [];
}

现场演示：https://plnkr.co/edit/HfQTYONXB67DvkQnv4KL?p=preview

Answer 2

调整你的功能

getServices(subtopic) {
    if(typeof this.subtopics[subtopic.code] !== "undefined"){
        return this.subtopics[subtopic.code].services;
            }
        }

返回我的期望，但需要几秒钟我不明白可能是更好的方法吗？