Angular2 在组件中显示 http get 响应

Question

我正在构建我的第一个 angular2 应用程序，这是我的第一个服务电话。我正在使用服务堆栈 API。GET 调用返回一个 IEnumerable 此调用自行工作，当插入我的角度服务时，状态恢复为 200，我可以在浏览器中看到返回的实际响应。但是，当此响应设置为在组件.html中显示为 li 项时，它不会显示它们。相反，它只显示指示已获取列表项的项目符号，但处理响应的方式存在一些问题。

Category.service.ts 代码如下：

import { Injectable } from '@angular/core';
import { CategoryDTO } from './Category';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class CategoryService {
constructor(private _http: Http) { }
getCategoriesFromApi(): Observable<CategoryDTO[]> {
return this._http.get("http://localhost:53426/category/find")
.map((response: Response) => <CategoryDTO[]> response.json());
}
/**
*
getCategoriesFromApi(): Category[] {
return [{ id: '123', name: 'Apparel' }];
}*/
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

类别.组件.ts如下

import { Component, OnInit } from '@angular/core';
import { CategoryDTO } from './Category';
import { CategoryService } from './category.service';
import { DataserviceService } from '../dataservice.service';
@Component({
selector: 'show-category',
templateUrl: './category.component.html',
styleUrls: ['./category.component.css']
})
export class CategoryComponent implements OnInit {
categoriesToDisplay: CategoryDTO[];
constructor(private categoryService: CategoryService) { }
getCatsToDisplay(): void {
/**
* this.categoriesToDisplay = this.categoryService.getCategoriesFromApi();
*/
this.categoryService.getCategoriesFromApi()
.subscribe((categoriesReturned) => this.categoriesToDisplay = categoriesReturned , err => console.log('err = ' + JSON.stringify(err, null, 2)));
}
ngOnInit() {
this.getCatsToDisplay();
}
/**
* public values: Category[];
constructor(private _dataService: DataserviceService) { }
ngOnInit() {
this._dataService
.getAll<Category[]>()
.subscribe((data: Category[]) => this.values = data);
*/
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

类别.组件.html

如下

<ul>
<li *ngFor="let category of categoriesToDisplay">
<span>{{category.name}}</span>
</li>
</ul>

CategoryDTO 打字稿类 (Category.ts) 是这样的：

export class CategoryDTO {
id: string;
name: string;
}

最后，获取所有类别的 API 调用是这样的：

public IEnumerable<CategoryDTO> Get(FindCategory request)
{
var entities = this.Db.Select<Category>().OrderBy(c => c.Name);
return this.Mapper.Map<List<CategoryDTO>>(entities);
}

我看到的输出是这样的 浏览器上的输出仅显示存在列表项，但不显示类别

Answer 1

您的属性以大写字母开头Id&Name

您需要更新角度代码以使用正确的属性。

export class CategoryDTO {
Id: string;
Name: string;
}
<ul>
<li *ngFor="let category of categoriesToDisplay">
<span>{{category.Name}}</span>
</li>
</ul>

Answer 2

等等！我已经发现了自己的一些问题，但这似乎并不完全是这样。正如LLai所说，很可能是因为您的财产的第一个字母大写！

可能有点奇怪，但改变

this.categoryService.getCategoriesFromApi()
.subscribe((categoriesReturned) => this.categoriesToDisplay = categoriesReturned , err => console.log('err = ' + JSON.stringify(err, null, 2)));

自

this.categoriesToDisplay = this.categoryService.getCategoriesFromApi()
.subscribe((categoriesReturned) => this.categoriesToDisplay = categoriesReturned , err => console.log('err = ' + JSON.stringify(err, null, 2)));

可能会做到这一点。我遇到了同样的问题，解决方案只是将我想更改的变量分配给 api 调用，此外还更改订阅中的相同变量。我还应该澄清一下，在我的代码中，我没有为我的变量提供类型(即我的变量只是public variable，这并不理想，我仍在寻找解决方案。希望这有帮助，祝你好运！

(我仍然是相当新的Angular，所以如果有人能解释为什么这很可爱。谢谢！