角2はURLからjsonデータを取得します

Question

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, 
     }; 
    }); 
    }); 

ここで私のコードは角度2です。私はJSONファイルからデータを取得し、角度カレンダーで表示したいと思います。 Here is angular-calendar Demo：どうすればいいですか？

Answer 1

カレンダーのデータを含むサービスを作成することができます。

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) || [] 

：前

fetchEvents() 
{ 

this.events= this._data_Service.getList() 

} 

---

：

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

は、コンポーネントにサービスを呼び出します。 data.jsonファイルをHttpにするには、JSONファイルをassetsフォルダ：./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; 

}