Angular 4 MaterializeCSS ngfor和tabs

Question

我正在試圖製作動態標籤。所以我使用實現CSS來創建在我的Angular 4應用程序中，我似乎無法得到它的工作。我試試這個：

<div> 
     <ul class="tabs tabs-fixed-width"> 
     <div class="indicator" style="z-index:1; background-color: #1ABFB4 !important;"></div> 
     <li *ngFor="let entry of data" class="tab"><a href="#{{entry.code}}">{{entry.code}}</a></li> 
     </ul> 
    </div> 
    <div *ngFor="let item of data" id="{{item.code}}" class="col s12">{{item.description}}</div> 
    </div> 

這正確創建的標籤，但他們不與頁面響應，每個標籤具有所有的div，所以當我有4個標籤，我得到的選項卡下4所描述。我如何使用ngFor製作標籤？

Answer 1

//使像下面

import { 
    Component, 
    ElementRef, 
    AfterViewInit, 
    NgZone, 
    Input, 
    Output 
} from '@angular/core'; 

declare var $: any; 

@Component({ 

    selector: 'tabs', 

    styles: [` 
     .carousel .carousel-item { 
      display: block; width: 200px; height:200px; 
      position: relative; top: 0; left: 0; 
     } 
    `], 

template: `<ng-content></ng-content>` 
}) 

export class MyTabsComponent implements AfterViewInit { 

$tabs: any; 
@Output() onShow: EventEmitter<any> = new EventEmitter(); 
@Input() swipeable = false; 

constructor(private el: ElementRef, private zone: NgZone) { } 

ngAfterViewInit() { 
    this.zone 
     .runOutsideAngular(() => { 

      this.$tabs = $(this.el.nativeElement); 
      this.$tabs.find('ul.tabs') 
       .on('click', 'a', ((tab) => { 
        this.zone.run(() => { // detect change and use 
         this.onShow.emit({ tab, tabRef: this.$tabs }); 
        }); 
       }).bind(this)) 
       .tabs({// initialize your tabs outside angular 
        'responsiveThreshold': 1920, 
        'swipeable': this.swipeable 

       }); 

     }); 
    } 
} 

//使用包裝組件的包裝，並提供數據

@Component({ 

select: 'app-root', 

template: ` 

<tabs (onShow)="onTabOpen($event)> 
    <div> 
     <ul class="tabs tabs-fixed-width"> 
      <div class="indicator" style="z-index:1; background-color: 
       #1ABFB4 !important;"></div> 
      <li *ngFor="let entry of data" class="tab"><a [attr.href]="'#'+ 
       entry.code">{{entry.code}}</a></li> 
     </ul> 
    </div> 
</tabs> 

<div *ngFor="let item of data" [attr.id]="item.code" class="col s12"> 
    {{item.description}}</div> 
` 
}) 
class AppComponent { 
    data: [ 
     { 
      code: 'first', 
      description: 'I am first tab' 
     }, 
     { 
      code: 'second', 
      description: 'I am second tab' 
     } 
    ] 

    onTabOpen(event:any) { 
    // do some stuff 
    } 
} 

這是爲我工作希望它爲你的！