Angular2材料设计动态标签答案

【问题标题】：Angular2 material design dynamic tabsAngular2材料设计动态标签
【发布时间】：2017-08-30 19:57:01
【问题描述】：

Angular 新手在这里。因此，过去几个小时我一直在尝试实现动态创建选项卡的能力。我开始使用材料设计，但我仍然无法做到这一点，也无法弄清楚我在哪里犯了错误。

当按下添加标签按钮时，没有任何反应。此外，从 ngOnInit 添加或删除选项卡的添加不会执行任何操作。很明显，我错过了一些东西...... 请帮忙？

tabs.ts

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)
  }
}

tab.ts

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

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

}

app.ts

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

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

【问题讨论】：

标签： angular material-design angular-material

【解决方案1】：

你必须使用 *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。

【讨论】：

【解决方案2】：

请看一下这个插件：https://plnkr.co/edit/vsONc35ucEr8e7M4WysH?p=preview

除了 Pradeep 所说的，当您单击 addnew 按钮时，您可能会遇到一些 BrowserAnimationsModule 错误。请参考Navigation Error in angular2 来解决这个问题。我会证明这一点，但在 plunker 中遇到了一些问题。

【讨论】：

感谢您的提醒。我确实遇到过，现在已经修复了。 systemjs 配置有一些问题，但现在一切都很好。