2017-04-05 172 views
3

這裏有角新手。 因此,我一直在嘗試過去幾個小時來實現動態創建選項卡的功能。我去了使用材料設計,但我仍然無法實現這一點,無法確定我犯的錯誤。Angular2材質設計動態標籤

當按下添加選項卡按鈕時,什麼也沒有發生。 此外,添加或刪除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 { 
} 

回答

2

你必須用*代替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在angular2而不是ng-repeat

0

請看看這個plunker:https://plnkr.co/edit/vsONc35ucEr8e7M4WysH?p=preview

添加到什麼普拉迪普說,你可能會在你點擊的AddNew按鈕遇到一些BrowserAnimationsModule錯誤。請參考Navigation Error in angular2來解決這個問題。我會證明這一點,但卻遇到了闖入者的一些問題。

+1

感謝您的單挑。我確實遇到過,現在已經修好了。對於systemjs配置有一些問題,但現在在這一方面都很好。 –

+0

很高興幫助。快樂編碼.... –