Angular2材质设计动态标签

这里有角新手。因此，我一直在尝试过去几个小时来实现动态创建选项卡的功能。我去了使用材料设计，但我仍然无法实现这一点，无法确定我犯的错误。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 { 
}

来源

2017-04-05 Sorin Grecu

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

来源

2017-04-05 09:38:12

请看看这个plunker：https://plnkr.co/edit/vsONc35ucEr8e7M4WysH?p=preview

添加到什么普拉迪普说，你可能会在你点击的AddNew按钮遇到一些BrowserAnimationsModule错误。请参考Navigation Error in angular2来解决这个问题。我会证明这一点，但却遇到了闯入者的一些问题。

来源

2017-04-05 09:54:26

感谢您的单挑。我确实遇到过，现在已经修好了。对于systemjs配置有一些问题，但现在在这一方面都很好。 –

很高兴帮助。快乐编码.... –

Angular2材质设计动态标签

回答

相关问题