使用 Aurelia 绑定和显示数据

Question

我是 Aurelia 的新手。我有一个 WebApi，它将返回一些我想填充到导出模型中的数据，然后在屏幕上显示信息。我认为它会进入我的运行事件，但不确定。谁能告诉我该怎么做。任何信息将不胜感激。我的代码如下。

--杰森

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

要在页面加载时发生某些事情，请使用attached() Aurelia 组件生命周期方法，如下所示：

attached() {
  // do something here
}

有关组件生命周期的更多信息，请参阅Aurelia's DocHub 上的文档。

使用 Fetch 获取数据的示例：

要使用 fetch（或任何其他 Web 服务）获取 HTTP 数据，您需要使用异步调用（使用 .then 链接下一个事件）。例如：

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

然后，只需将您的数据绑定到this.data（取决于您获取的数据类型）。例如：

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