如何使用 Angular2 在 *ngFor 循環中定位對象鍵

Question

在 Angular 2 最新的 RC 上下文中，我嘗試構建一個帶有多個選項卡的視圖。 數據來自一個 API，我需要分兩步進行調用以檢索目標數據。

• 每個選項卡都包含手風琴組並與categories
• 每個手風琴組都包含項目符號列表並與categories[i].subtopics

這部分工作得很好。

當我嘗試使用來自第二個數組subTopics數據來實現<li>標記時，事情變得更加棘手。 我嘗試了幾種*ngFor="let services of subTopics但沒有成功。以我想要的方式顯示的 y 選項是什么（請參閱 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;
            }
        }

返回我期望的結果，但需要幾秒鍾我不太明白 可能是更好的方法？