从 HTTP GET 返回自定义对象列表以在 Angular 2 应用程序中使用

Posted 2023-03-05

【中文标题】从 HTTP GET 返回自定义对象列表以在 Angular 2 应用程序中使用

【英文标题】：Return a List of custom objects from an HTTP GET for use in an Angular 2 app

【发布时间】：2016-09-14 05:24:08

【问题描述】：

我试图弄清楚如何正确返回自定义对象列表并使用 html 文件打印其内容。

以下是 HTTP GET 方法的样子（为简单起见，我已经剥离了一些内容以仅说明问题）：

[HttpGet("/atr/testing")]
public List<CustomObject> GetCustomObjects()

    //MasterObject.CustomObjects returns a List of CustomObjects
    return MasterObject.CustomObjects();

我的 TypeScript 文件（称为 home.ts）订阅并调用 HttpGet 方法 - Home 类如下所示（我已排除所有导入和 @Component 部分）：

export class Home 
public selectedConfiguration: string = 'TESTVALUE';

constructor(private http: Http) 
    this.getConfigurations()
        .subscribe(res => 
            this.selectedConfiguration = res;
        );


getConfigurations() 
    console.log('Home:getConfigurations entered...');

    return this.http.get('atr/testing')
        .map((response) => 
            console.log(response);
            return response.json();
        );

如您所见，构造函数调用了调用 HttpGet 方法的“getConfigurations”。让我困惑的部分是如何正确使用返回的响应？根据我的理解，响应作为 JSON 字符串返回（这就是为什么 Home 类中的 selectedConfiguration 变量是字符串值而不是列表的原因）。当我尝试在我的 HTML 文件中使用 selectedConfiguration 打印出“selectedConfiguration”字符串时，我得到了这个：

[object Object],[object Object],[object Object],[object Object]

如果我在我的 HTML 中使用 selectedConfiguration[0]，我只会得到一个：[object Object]

GET 方法返回的 List 应该有 4 个 CustomObject，看起来 JSON 响应至少有这个。每个 CustomObject 都有诸如“名称”、“日期”、“时间”等变量。我尝试使用 selectedConfiguration[0].Name 在我的 HTML 中打印数据，但它什么也没打印出来。我不确定从这里做什么（或者我做错了什么）以显示每个对象的信息。

【参考方案1】：

将其作为 json 结果返回：

[HttpGet("/atr/testing")]
public JsonResult GetCustomObjects()

    //MasterObject.CustomObjects returns a List of CustomObjects
    return Json(MasterObject.CustomObjects());

【讨论】：

感谢您的回复。我更改了函数以返回 JsonResult 但它仍然不会打印。我正在使用 Chrome 的开发人员工具，响应肯定会返回 List 的 JSON 表示形式——这似乎是一个 JSON 对象。你知道我将如何访问我的 HTML 文件中 JSON 的不同部分吗？

所以你会收到一个很好的 json 作为响应。 console.log 将其显示为 [object]，因为它是一个复杂的对象。要以角度循环遍历数组，您需要使用 ng-repeat。

【参考方案2】：

简短的回答

在您的示例中，您尝试将 JSON 对象转换为字符串。要让它工作，你可能必须做：

this.selectedConfiguration = JSON.stringify(res);

长答案

假设您的 CustomObject 类看起来像：

public class CustomObject

    public string Name  get; set; 
    public DateTime Date  get; set; 

在您的 Angular 代码中，创建一个模仿它的界面。在开发者工具中验证大小写是否匹配（“名称”而不是“名称”）：

export interface ICustomObject 
    Name: string;
    Date: Date;

利用 TypeScript 的类型检查，将返回的列表实际读取为自定义对象的数组：

export class Home implements OnInit 
  public configurations: ICustomObject[];
  public selectedConfiguration: ICustomObject;

  constructor(private http: Http) 
    // move initialization code to ngOnInit. Don't forget the import and implements
  

  ngOnInit() 
    this.getConfigurations()
        .subscribe((customList: ICustomObject[]) => 
            this.configurations = customList;
            // todo: determine the selected configuration
            this.selectedConfiguration = this.configurations[0];
        );
  

  getConfigurations(): ICustomObject[] 
    return this.http.get('atr/testing')
        .map((response: Response) => 
            return <ICustomObject[]>response.json();
        );