角4 MaterializeCSS ngforとタブ

Question

私は動的にタブを作ろうとしています。だから、私はAngular 4 Appでそれを作成するために、マテリアライズCSSを使用して、私はそれを働かせるように見えません。私はこれを試してみてください。

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

を提供し、以下のようなラッパーは、それは同様にあなたのために働く期待してください！