如何使用map从角度为5的{api}挖出数据

时间:2017-12-01 00:03:45

标签: angular

大家好,我需要你的帮助,我正在使用角度5,我是一个新的角度我无法从我的api服务返回的数据中获取数据

根据我的HTML代码,我做了这个

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

li标签重复我Db中的确切数据但是我看不到所有数据都是li标签的重现

这是我的代码

与我的服务器代码相同的结构

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

我像这样打电话给服务器

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:

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

根据Angular Documentation的说法, &#34;其他API可能会在对象中隐藏您想要的数据。 您可能必须通过使用RxJS映射运算符处理Observable结果来挖掘数据。&#34;

请有人帮我解决如何使用地图挖掘数据的问题。提前谢谢。

1 个答案:

答案 0 :(得分:0)

感谢Brendan这里是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();