角度5でapiからデータを掘り出すためにマップを使用する方法

Question

こんにちは皆さん、私はあなたの助けが必要です、私は角度5を使用しています、私は角度に新しいです私は私のAPIサービスが戻っているものからデータを得ることができません

は私のhtmlコードに応じて、私はこの

<ul> 
<li *ngFor="let cat of categories"> 
<span class="badge">{{cat.id}}</span> {{cat.name}} 
</li> 
</ul> 

のliタグが私のDBにデータの正確な数を繰り返していたが、私は私が見るすべては、Liタグのrepititionあるデータを参照してくださいカント

ここに私のコードは

私はこの

product.service code: 

     getCategories(): Observable<Category[]> 
     { 
     return this.http.get<Category[]> 
     ('http://localhost:56757/api/product/categories') 
     .pipe(
     tap(categories` => this.log(`fetched categories`)), 
     catchError(this.handleError('getCategories', [])) 
     ); 
     } 

Category.component.tsコード

 products:Product[]; 


      constructor(private productService: ProductService, 
      private route: ActivatedRoute, 
      private location: Location) { } 
      ngOnInit() { 
      getCategories(): void { 
      this.productService.getCategories() 
      .subscribe(products => this.products = products); 
      } 

HTMLのようなサーバーと呼ば

export class Category 
    { 
    id: number; 
    name: string; 
    } 

私のサーバーのコードと同じ構造：

 <ul> 
     <li *ngFor="let cat of categories"> 
      <span class="badge">{{cat.id}}</span> {{cat.name}} 
     </li> 
     </ul> 

を

Accoこのような角度のドキュメントには、 "他のAPIはオブジェクト内に必要なデータを埋め込む可能性があります。 あなたがRxJSマップ演算子で観察結果を処理することによって、そのデータを掘るする必要があるかもしれません。」

を誰かがデータを掘るためにマップを使用する方法で私を助けることができるしてください。事前に感謝。

Answer 1

感謝ブレンダンここでasp.netのサーバー側のコードがある

モデル：

  public class Category 
      {   
      public int Id { get; set; } 

      public string Name { get; set; }  
      } 



     [HttpGet] 
     [Route("categories")] 
     public async Task<List<Category>> GetCategory() => await 
     db.Categories.ToListAsync();