Angular 2從url獲取json數據

let headers = new Headers(); 
headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
let ep = './data.json'; 
this.events = this.http 
    .get(ep, { headers: headers }) 
    .map(res => res.json()) 
    .map(({results}: { results: Data[] }) => { 
    return results.map((data: Data) => { 
     return { 
     title: data.title, 
     start: new Date(data.from), 
     colors.yellow, 
     }; 
    }); 
    });

這是我在Angular 2中的代碼。我想從JSON文件中獲取數據並在角日曆中顯示它。 Here is angular-calendar Demo：我該怎麼做？Angular 2從url獲取json數據

來源

2017-03-18 Erik

您可以製作包含日曆數據的服務。

getList(): any 
{ 

var date = new Date('2017-01-12'); 
var date2 = new Date('2017-03-17'); 

return (
    [ 

    { title: 'Beauty And The Beast', start: date2, color: { primary: '#e3bc08', secondary: '#FDF1BA' } }, 

    { title: 'La La Land', start: date, color: { primary: '#e3bc08', secondary: '#FDF1BA' } } 

    ] 
) 
}

然後，您將不得不從模板中刪除異步管道。

前：

[events]="(events | async) || []

後：

[events]="(events) || []

然後調用服務的組件：

fetchEvents() 
{ 

this.events= this._data_Service.getList() 

}

。要獲得data.json文件和Http，您需要將JSON文件放在資產文件夾中：./assets/data.jsom，以便應用程序可以訪問它：localhost:8080/data.json。

然後您只需提出獲取請求。

fetchEvents(): void { 


    this.events = this.http 
     .get('../../assets/data.json') // the path may vary depending 
            // on your directory structure. 
     .map(res => res.json()) 
     .map((results) => { // this might be different depending on 
          // your json and type definition. 

     return results.map((data: Data) => { 

      console.log({title: data.title, 
      start: new Date(data.from), 
      color: colors.yellow}) 

      return { 
      title: data.title, 
      start: new Date(data.from), 
      color: colors.yellow,data 
      }; 
     }); 
     }); 


}// fetchEvents

這裏是我使用的JSON：

[ 

{"title":"La La Land","from":1490475722305}, 
{"title":"Beauty And The Beast","from":1490475722305} 

]

最後，您可以在您的組件類型定義：

interface Data { 

    title: string; 
    from:string; 

} 

interface DataEvent extends CalendarEvent { 
    data: Data; 

}

來源

2017-03-22 07:28:16

Angular 2從url獲取json數據

回答

相關問題