Wie man Karte verwendet, um Daten aus api in Winkel 5 auszugraben

Question

Hallo alle zusammen, ich brauche deine Hilfe bitte, ich benutze Winkel 5 und ich bin neu zu eckig Ich bin nicht in der Lage, Daten aus dem, was meine API-Service zurückgibt

nach meinem hTML-Code habe ich diesen

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

der li-Tag die genaue Anzahl der Daten in meinem Db wiederholen, aber ich kann die Daten sehen, alles, was ich sehe, ist repitition des li-Tages

Hier ist mein Code

Die gleiche Struktur mit meinem Server-Code

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

ich den Server wie diese

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 Code

 products:Product[]; 


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

HTML genannt:

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

Acco Gehen Sie dazu in die Angular-Dokumentation, die so lautet: "Andere APIs können die gewünschten Daten in einem Objekt enthalten. Möglicherweise müssen Sie diese Daten ausgraben durch das beobachtbaren Ergebnis der Verarbeitung mit dem RxJS Kartenbetreiber.“

Bitte jemand mit mir helfen kann, wie Karte verwenden, um die Daten zu graben. Vielen Dank im Voraus.

Answer 1

Dank Brendan hier ist die asp.net Server-Seite Codes

Modell:

  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();