Angular2材質設計動態標簽

Question

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

Answer 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>

在ngFor中使用ngFor而不是ng-repeat 。

Answer 2

請看看這個plunker： https ：//plnkr.co/edit/vsONc35ucEr8e7M4WysH ？ p = preview

除了Pradeep所說的，當你點擊addnew按鈕時，你可能會遇到一些BrowserAnimationsModule錯誤。 請參閱angular2中的導航錯誤來解決這個問題。 我會證明這一點，但在plunker遇到一些問題。