Question

我正在尝试在控制器（asp.net MVC）中加载数据库，然后使用aurelia fetch客户端将控制器中的数据加载到视图中，但aurelia没有获取任何数据（视图表为空）这不是手动声明输入数组时的结果）

EmployeesController（Controller）

using Microsoft.AspNetCore.Mvc;
using SPAproject.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SPAproject.Controllers
{
    [Route("api/[controller]")]
    public class EmployeesController : Controller
    {
        private readonly EmployeesDbContext context;

        public EmployeesController(EmployeesDbContext context)
        {
            this.context = context;
        }

        [HttpGet]
        public IEnumerable<Employee> Get()
        {
            return context.Employees.ToList();
        }
    }
}

emp-api（我在其中获取数据的地方）

import { HttpClient } from 'aurelia-fetch-client';
import { inject } from 'aurelia-framework';

let latency = 200;
let id = 0;


@inject(HttpClient)
export class EmpAPI {
    isRequesting = false;

    constructor(http) {
        this.http = http;
        this.http.configure(config =>
                            config.useStandardConfiguration()
                                    .withDefaults({
                                        mode: 'cors'
                                   }
                                 )
                             );
        this.employees = [];

        http.fetch('/api/Employees')
            .then(x => x.json())
            .then(employees => this.employees = employees);


    }

    getEmployeeList() {
        this.isRequesting = true;
        return new Promise(resolve => {
            setTimeout(() => {
                let results = this.employees.map(x => {
                    return {
                        id: x.id,
                        firstName: x.firstName,
                        lastName: x.lastName,
                        email: x.email
                    }
                });
                resolve(results);
                this.isRequesting = false;
            }, latency);
        });
    }

    getEmployeeDetails(id) {
        this.isRequesting = true;
        return new Promise(resolve => {
            setTimeout(() => {
                let found = this.employees.filter(x => x.id == id)[0];
                resolve(JSON.parse(JSON.stringify(found)));
                this.isRequesting = false;
            }, latency);
        });
    }

    saveEmployee(employee) {
        this.isRequesting = true;
        return new Promise(resolve => {
            setTimeout(() => {
                let instance = JSON.parse(JSON.stringify(employee));
                let found = this.employees.filter(x => x.id == employee.id)[0];

                if (found) {
                    let index = this.employees.indexOf(found);
                    this.employees[index] = instance;
                } else {
                    instance.id = getId();
                    this.employees.push(instance);
                }

                this.isRequesting = false;
                resolve(instance);
            }, latency);
        });
    }
}

员工列表（我正在尝试从API获取数据的地方）

import { EventAggregator } from 'aurelia-event-aggregator';
import { EmpAPI } from 'emp-api';
import { inject } from 'aurelia-framework';
import { EmployeeUpdated } from 'employeeUpdated';
import { EmployeeViewed } from 'employeeViewed';

@inject(EmpAPI, EventAggregator)
export class EmployeeList {
    constructor(api, ea) {
        this.api = api;
        this.ea = ea;
        this.employees = [];

        ea.subscribe(EmployeeViewed, msg => this.select(msg.employee));
        ea.subscribe(EmployeeUpdated, msg => {
            let id = msg.employee.id;
            let found = this.employees.find(x => x.id == id);
            Object.assign(found, msg.employee);
        });
    }

    created() {
        this.api.getEmployeeList().then(employees => this.employees = employees);

    }

    select(employee) {
        this.selectedId = employee.id;
        return true;
    }
}

Answer 1

在这种情况下，您都可以像http.get('/api/Employees')一样使用他们的wrapper methods之一。

如果要使用访存，则需要指定方法http.fetch('/api/Employees', {method: 'GET'})

Answer 2

您看到的问题是因为您没有等待数据返回。到创建employee-list元素时，employees中的EmpAPI属性仍未定义，因为尚未返回数据获取调用。

我看到您有200毫秒的延迟来防止这种情况的发生，但是有时候这还不够（我怀疑这是事实）。如果要保留此策略，也许可以尝试其他延迟？有多种方法可以执行此操作，例如仅在数据获取调用已解决时才解决getEmployeeList()承诺，进一步延迟调用，等待调用等。

Aurelia获取客户端未从控制器接收数据

2 个答案: