如何在ngb-tabset中使用* ngFor?

时间:2018-04-04 14:51:44

标签: angular typescript

如何在ngb-tabset

中动态创建标签

组件代码

 tabs = ['Tab-1','Tab-2'];

HTML代码

<ngb-tabset #tabs>
  <ngb-tab *ngFor="let tab of tabs" [title]="tab">
    <ng-template ngbTabContent>
       Some Data
    </ng-template>
  </ngb-tab>
</ngb-tabset>

我收到错误

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngOnChanges (common.es5.js:1689)
    at checkAndUpdateDirectiveInline (core.es5.js:10812)
    at checkAndUpdateNodeInline (core.es5.js:12238)
    at checkAndUpdateNode (core.es5.js:12177)
    at debugCheckAndUpdateNode (core.es5.js:12880)
    at debugCheckDirectivesFn (core.es5.js:12821)
    at Object.eval [as updateDirectives] (TabsMatchesComponent.html:14)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806)
    at checkAndUpdateView (core.es5.js:12144)
    at callViewAction (core.es5.js:12507)

1 个答案:

答案 0 :(得分:2)

这里发生的是您为要创建名为tabs的本地var的元素使用相同的名称。这就是* ngFor尝试迭代的内容,而不是名为tabs的组件变量。

我建议您将任何名称更改为其他名称,然后重试。