jsonファイルからデータを取り出してボタンで表示する

Question

jsonファイルからデータを取り出して表示しようとしていますが、Angularをコーディングする経験がないため、プログラムを続行できません。

現在、HttpClientModuleを使用するAngular 4.3を使用しています。

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements OnInit { 
    title = '?'; 
    data; 

    constructor(private http: HttpClient) { 
    } 

    ngOnInit(): void { 
     this.http.get('/src/app/students.json') 

    } 

    chgTab1() { 
     this.title = "Changed Title"; 
    } 

    chgTab2() { 
     //Want to display the items from json file 
    } 

} 

students.json

[ 
    {"id": "3", "mame": "Dama"}, 
    {"id": "1", "mame": "ASD"}, 
    {"id": "2", "mame": "Chris"}, 
    {"id": "4", "mame": "Sass"}, 
] 

Answer 1

import { Component, OnInit } from '@angular/core'; 
import { Http,Headers } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements OnInit { 
    title = '?'; 
    data; 
    showData = false; 

    constructor(private http: Http) { } 

    ngOnInit(): void { 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    this.http.get('/assets/students.json', { headers: headers }).map(res => res.json()).subscribe(data => { 
    this.data = data; 
}) 

    } 

    chgTab1(){ 
    this.title ="Changed Title"; 
    } 

    chgTab2(){ 
    //Want to display the items from json file 

    this.showData = !this.showData; 
    } 

} 

私は全部を編集しました。それは今あなたのために働くでしょう。正しい場所にstudent.jsonへのパスがあることを確認してください。アセットディレクトリに移動しました