Переплет и отображение данных с Aurelia

Question

Я новичок в Aurelia. У меня есть WebApi, который вернет некоторые данные, которые я бы хотел заполнить в моей экспортируемой модели, а затем отобразить информацию на экране. Я думаю, что это пойдет в мое событие, но я не уверен. Может кто-нибудь сказать мне, как это сделать. Любая информация была бы наиболее оценена. Мой код ниже.

--Jason

import 'fetch'; 
 
import {HttpClient, json} from 'aurelia-fetch-client'; 
 
import {inject} from 'aurelia-dependency-injection'; 
 

 
declare var window: { wcApiUrl: string, wcAmtInstanceId: string }; 
 

 
@inject(HttpClient) 
 
export class BureauModUpdate { 
 

 
    files: string; 
 
    
 
    constructor(private http: HttpClient) { 
 
     http.configure(x => { 
 
      x.defaults.headers = { 'Authorization': 'Basic ' + window.wcAmtInstanceId } 
 
     }); 
 
    } 
 

 
    public run(): void { 
 
     //Would I put it here ?? 
 

 
    } 
 
    upload(): void { 
 
     var form = new FormData() 
 
     for (var i = 0; i <= this.files.length; i++) { 
 
      form.append('file', this.files[i]) 
 
      this.http.fetch(window.wcApiUrl + '/Lookup/BureauModUpdate/CreateBureauModUpdates', { 
 
       method: 'post', 
 
       body: form 
 
      }) 
 
     } 
 

 
    
 

 
    } 
 
} 
 

 
export class BureauModUpdateHistory { 
 
    public IndexId: number; 
 
    public UploadID:number; 
 
    public EmployeeNum: number; 
 
    public filename: string; 
 
    public Bureau: string; 
 
    public UploadedDate: Date; 
 
    public UploadedStatus: string; 
 
    public ErrorInfo: string; 
 
    public RecordCount: number; 
 
    
 
}

Answer 1

Чтобы сделать что-то случится при загрузке страницы, используйте метод Aurelia жизненный цикл компонента attached(), как это:

attached() { 
    // do something here 
} 

Для получения более подробной информации о жизненном цикле компонентов см. в документации по адресу Aurelia's DocHub.

Пример использования Fetch для получения данных:

Для получения данных HTTP с использованием выборки (или любой другой веб-сервис), вам нужно использовать асинхронный вызов (с помощью .then в цепи следующего события). Например:

this.http.fetch(url).then(response => { 
    this.data = response; 
} 

Тогда просто связать свои данные this.data (в зависимости от того, какой тип данных вы получаете). Например:

<template> 
    Hello, ${data.fname}! 
</template>