Json 访问从model-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);

    };
}

型号
：

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

视图
：

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

所以我再一次看不到视图上出现的数据，我觉得我遗漏了一些非常简单的东西

//编辑

因此，在进行了一点挖掘之后，我对API做了一点修改，返回的是
JSON数组
，而不是
JSON对象
，并将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");
        }

    }
}

非常感谢您的帮助，
您很可能需要使用
JSON.parse将JSON响应反序列化为Javascript对象

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

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

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

感谢您的快速回复，但我得到了：“错误[app router]引用错误：未定义解析（…）”抱歉@TezWingfield，我对复制粘贴有一些困惑。我编辑了答案，删除了
resolve
内容。现在应该可以用了。嗨，不是我的错。开发人员永远不应该复制粘贴-无论如何更改都不起作用哈哈。请查看我的编辑。感谢您的快速回复，但我收到了：“错误[app router]ReferenceError:resolve未定义（…）”抱歉@TezWingfield，我有一些复制粘贴混淆。我编辑了答案，删除了
resolve
内容。现在应该可以用了。嗨，不是我的错。开发人员永远不应该复制粘贴-无论如何更改都不起作用哈哈。请看我的编辑。