angular2 - le contenu des onglets le charge à partir du fichier json local

Question

Je travaille sur le composant angulaire 2 onglets.

Actuellement, je suis les exemple ci-dessous Plunker Angular 2 Tabs

je dois faire les onglets dynamiques en lisant le fichier JSON local.

Mon JSON

[ 
    { 
    "id": "1", 
    "name": "General", 
    "content": [ 
     { 
     "header": "Basic Information", 
     "contents": [ 
      { 
      "label": "Report goes here" 
      } 
     ] 
     } 
    ] 
    }, 
    { 
    "id": "2", 
    "name": "Additional info", 
    "content": [ 
     { 
     "header": " Information", 
     "contents": [ 
      { 
      "label": "Report goes here" 
      } 
     ] 
     } 
    ] 
    } 
] 

Service.ts

export class DashboardService{ 

    private _url: string = "assets/sample.json"; 

    constructor(private _http: Http){} 

     getRecords(){ 
      return this._http.get(this._url) 
      .map((response:Response) => response.json()) 
      .catch(this._errorHandler); 
     } 

     _errorHandler(error: Response){ 
     console.error(error); 
     return Observable.throw(error || "Server Error"); 
     } 

} 

Component.ts

export class DynamicTabsComponent implements OnInit{ 

    records = []; 
    errorMsg: string; 

    constructor(private _dashboardService: DashboardService) { } 

    ngOnInit() { 
    this._dashboardService.getRecords() 
     .subscribe(
     resGetRecords => this.records = resGetRecords, 
     resRecordsError => this.errorMsg = resRecordsError 
     ); 
    } 

} 

Maintenant, comment le lire dans le fichier composant.

ici onglet lien, je suis dans l'attente est

• Informations complémentaires
• Général

Description Obligatoire avec en-tête et l'étiquette.

Toute aide serait appréciée.

Answer 1

Vous faire une * ngFor sur votre JSON pour afficher les onglets:

<tabs> 
    <tab *ngFor="let tab of tabs" tabTitle="{{tab.name}}"> 
    <div>{{tab.content[0].header}}</div> 
    <div>{{tab.content[0].contents[0].label}}</div> 
    </tab> 
</tabs> 

Vous déclarez votre JSON dans le composant ou l'importer de l'extérieur:

class App { 

tabs = [ 
    { 
    "id": "1", 
    "name": "General", 
    "content": [ 
     { 
     "header": "Basic Information", 
     "contents": [ 
      { 
      "label": "Report goes here" 
      } 
     ] 
     } 
    ] 
    }, 
    { 
    "id": "2", 
    "name": "Additional info", 
    "content": [ 
     { 
     "header": " Information", 
     "contents": [ 
      { 
      "label": "Report goes here" 
      } 
     ] 
     } 
    ] 
    } 
]; 

} 

travail fourchette de votre plunker here

Answer 2

S'il s'agit d'un fichier JSON local, pourquoi effectuez-vous des appels http?

Pour lire un fichier JSON, il suffit de faire

let jsonFile = require('relative/path/to/json/file.json') 

et il devrait charger votre fichier JSON.