Angular2材质设计动态选项卡

我是个有棱角的新手。 所以在过去的几个小时里，我一直在尝试实现动态创建选项卡的功能。我开始使用材料设计，但我仍然无法做到这一点，也无法找出我在哪里犯了错误

按下“添加选项卡”按钮时，不会发生任何情况。 此外，从ngOnInit添加或删除选项卡也没有任何作用。 很明显，我错过了一些东西。。。 需要帮忙吗

制表符

import {Component, OnInit} from '@angular/core';
import {Tab} from "./tab";

@Component({
  selector: 'tabs',
  template: `<md-tab-group>  <md-tab ng-repeat="tab in tabs"
              label=TEST>
</md-tab>
</md-tab-group>
<button (click)="addTab()">Add new tab</button>`,
})
export class Tabs implements OnInit {

  tabs: Tab[] = [];

  ngOnInit(): void {

  }

  addTab() {
    var tab = new Tab();
    this.tabs.push(tab)
  }
}

从'@angular/core'导入{Component，OnInit}；
从“/Tab”导入{Tab}；
@组成部分({
选择器：“制表符”，
模板：`
添加新选项卡`，
})
导出类选项卡实现OnInit{
制表符：制表符[]=[]；
ngOnInit（）：void{
}
addTab（）{
var tab=新选项卡（）；
此.tabs.push（制表符）
}
}

制表符

import {Component} from '@angular/core';

@Component({
  selector: 'tab',
  template: `<products></products>`,
})
export class Tab {

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“制表符”，
模板：``，
})
导出类选项卡{
}

app.ts

import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<tabs></tabs>`,
})
export class AppComponent {
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：``，
})
导出类AppComponent{
}

您必须使用*ngFor而不是ng repeate

您的模板代码应该如下所示

<md-tab-group>  <md-tab *ngFor="let tab of tabs" label=TEST> </md-tab>
</md-tab-group>
<button (click)="addTab()">Add new tab</button>

添加新选项卡

---

在angular2中有

ngFor

而不是

ng repeat

请看一下这个插件：

---

除了Pradeep所说的，当您单击addnew按钮时，您可能会遇到一些

BrowserAnimationsModule

错误。请参阅以解决此问题。我本可以证明这一点，但在plunker中遇到了一些问题。

谢谢你的提醒。我确实遇到过这个问题，现在已经解决了。systemjs配置有一些问题，但现在这方面一切都很好。