Angular2在组件中显示http get响应

Question

我正在构建我的第一个angular2应用程序，这是我的第一个服务电话。我正在使用服务堆栈API。 GET调用返回一个IEnumerable这个调用自己工作，当插入我的角度服务时，状态返回200，我可以在浏览器中看到返回的实际响应。但是，当此响应设置为在component.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>

category.component.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>

category.component.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);
    }

我看到的输出是output on the browser just shows that there is a list item but doesn't display the category

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，所以如果有人能解释为什么这样做会很可爱。谢谢你！）