Angular 2嵌套ng不迭代

Question

我有这个HTML：

<div class="col-md-4" *ngFor="let category of categories">
  <h3>{{category.name}} ({{category.links.length}})</h3>
  <div>
    <ul>
      <li *ngFor="let link of category.links">
        <a href="" [href]="link.url" target="_blank">{{link.displayName}}</a>
      </li>
    </ul>
  </div>
</div>  

正如您所看到的，我遍历一个类别列表，对于每个类别，我循环浏览链接列表。

问题是嵌套的ngFor：它不会迭代任何东西。我确信该列表中有项目，因为({{category.links.length}})给出了结果。

此外，当我将类别列表转储到控制台时，我可以看到完整的对象图：每个类别都只有links数组中的一个项目。

那么，我在这里错过了什么？我需要做些什么来实现这个目标？

编辑： 这是生成的html（li标签）

    <!--template bindings={
  "ng-reflect-ng-for-of": "[object Object]"
}-->

这是相应的打字稿：

constructor(private linkService: LinkService){
  this.linkService.getLinks().subscribe(p => {console.log(p); this.categories = p});
}

以下是Category和LinkItem的定义：

export class Category {
    name : string;
    links = new Array<LinkItem>();

    constructor(name:string)
    {
        this.name = name;
    }

    addLink(linkItem : LinkItem)
    {
        this.links.push(linkItem);
    }
}

export class LinkItem {
    url:string;
    displayName:string;

    constructor(url:string, displayName:string)
    {
        this.url = url;
        this.displayName = displayName;
    }
}

类别转储：

Answer 1

根据您的categories对象结构，HTML应如下所示：

<div class="col-md-4" *ngFor="let category of categories">
  <h3>{{category.name}} ({{category.links.length}})</h3>
  <div>
    <ul>
      <li *ngFor="let link of category.links">
        <a [href]="link.url" target="_blank">{{link.name}}</a>
      </li>
    </ul>
  </div>
</div>