Question

是另一个Aurelia问题，道歉！

所以我试图访问从模型传递的视图中的数据，而我可以看到response中的数据，我似乎无法在视图上显示它。非常感谢任何帮助。

我尝试了一些事情，但我想是Aurelia，ES6和承诺的新手，它会让我失望一点，或者我一直盯着看。

//编辑数据访问组件

import {inject} from "aurelia-framework";
import {HttpClient} from "aurelia-http-client";

let baseUrl = "/FormDesigner";

@inject(HttpClient)
export class FormData{

    constructor(httpClient)
    {
        this.http = httpClient;
    }

    GetFormById(formId)
    {
        return this.http.get(`${baseUrl}/GetFormById/${formId}`)
                        .then(f => f.content);

    };
}

Model：

activate(params)
{
    return this.form.GetFormById(params.formId)
                    .then(f => this.form = f);
}

View：

<p class="navbar-text navbar-left">
   ${form.name}
 </p>

Response：

{"Id":"x","OrganisationId":"x","OrganisationDepartmentId":null,"ScheduleId":null,"DefinitionTypeId":"x","ReferenceNumber":11171,"Name":"New Form Test External Access","Description":"","IsTemplate":true,"IsActive":true,"IsSingleFormTemplate":false,"MinimumInstances":null,"MaximumInstances":null,"IsAdhocCreationEnabled":false,"HasCalculation":false,"Calculation":null,"Recalculate":true,"IsHidden":false}

所以我再也没有看到视图中出现的数据，我觉得我错过了一些相当简单的东西。

// EDITS

所以经过一番挖掘后，我对我的API进行了一些更改，返回JSON array而不是JSON object，并将Aurelia切换为使用Fetch ...所以现在我可以访问了我的数据组件中的数据，但不是我的模型 - 相当令人沮丧！

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

let baseUrl = "/FormDesigner";

@inject(HttpClient)
export class FormData{

    constructor(httpClient)
    {
        httpClient.configure(config => {
            config
              .withBaseUrl('/FormDesigner')
              .withDefaults({
                  credentials: 'same-origin',
                  headers: {
                      'Accept': 'application/json',
                      'X-Requested-With': 'Fetch'
                  }
              })
              .withInterceptor({
                  request(request) {
                      console.log(`Requesting ${request.method} ${request.url}`);
                      return request;
                  },
                  response(response) {
                      console.log(`Received ${response.status} ${response.url}`);
                      return response;
                  }
              });
        });

        this.http = httpClient;
    }

    GetFormById(formId)
    {
        return this.http.fetch(`/GetFormById/${formId}`)
            .then(response => response.json())
            .then(data => {
                //Log here, to check incoming data
                console.log("From component: " + data.Name);
                //This WORKS
            });

    };
}

我再次创建了一个抽象，因为我的模型不需要知道对服务器的调用。

import {inject} from "aurelia-framework";
import {FormData} from "form/formData";

@inject(FormData)
export class Form
{

    constructor(formData)
    {
        this.form = formData;

    }

    activate(params)
    {
        if(params.formId != null)
        {
            return this.form.GetFormById(params.formId)
            .then(data => 
            {
                this.form = data
                console.log(this.form.Name);
                //This does not work!!
            });
        }
        else
        {   
            //Show message that param does not exist or redirect to no form page
            console.log("No Id");
        }

    }
}

非常感谢任何帮助，

Answer 1

您很可能需要使用JSON.parse将JSON响应反序列化为Javascript对象。

GetFormById(formId)
{
  return this.http.get(`${baseUrl}/GetFormById/${formId}`)
    .then(response => JSON.parse(response.content));
};

访问从模型传递的视图中的数据 - Aurelia

1 个答案: