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

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}

所以我又一次没有看到数据出现在视图上，我觉得我遗漏了一些相当简单的东西。

//编辑

所以在稍微挖掘之后，我对我的 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

Accessing data within a view passed from model - Aurelia

json

aurelia