如何在ngb-tabset中用*ngFor动态创建标签页？报错求助

这个问题我碰到过，是典型的命名冲突导致的！

错误原因分析 #

你在模板里给<ngb-tabset>设置了模板引用变量#tabs，但这个名字和你Component类里定义的数组变量tabs完全重名了。在Angular模板中，模板引用变量的优先级会高于组件类的属性，所以当*ngFor="let tab of tabs"执行时，它遍历的已经不是你定义的字符串数组，而是<ngb-tabset>组件的实例（一个Object对象），这就触发了NgFor only supports binding to Iterables such as Arrays的错误。

修复方案 #

只需要把模板引用变量的名字改成和组件类变量不重复的名称即可，比如#tabSet：

修改后的Component代码（无需改动）

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

修改后的HTML代码

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

这样修改后，*ngFor就能正确识别到你Component类里的tabs数组，动态创建标签页就正常工作了。

内容的提问来源于stack exchange，提问作者Rahul Sharma