角度2の素材設計の動的タブ

Question

角の初心者はこちら。 私は過去数時間、動的にタブを作成する機能を実装しようと試みてきました。私は材料設計を使用して行ったが、私はまだこれを達成することはできませんし、私が間違っているところを想像することはできません。

追加タブボタンを押しても何も起こりません。 また、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の

を使用する必要があります

あなたのテンプレートコードはangular2の代わりng-repeatにngForであり、この

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

ようにする必要があります。

Answer 2

このplunkerを見てください：https://plnkr.co/edit/vsONc35ucEr8e7M4WysH?p=preview

はプラディープはあなたがAddNewのボタンをクリックしたときには、いくつかのBrowserAnimationsModuleエラーが発生することがあります、言ったことへの追加。これを解決するにはNavigation Error in angular2を参照してください。私はそれを示していましたが、プランカでは何らかの問題に遭遇しました。