尝试区分“[object Object]”时出错。 Angular-11 应用程序中只允许使用数组和可迭代对象

Question

使用 *ngFor，我无法从我的 component.ts 获取数据到我的 component.html

同样的方法适用于一个 class 但不适用于另一个 class。

这是我的服务class

export class FoodListService {
  private url = environment.serverURL;

  constructor(private http: HttpClient) {
  }

  //get all products from one store
  getAllProducts(storeId: Number): Observable<FoodListModelServer[]> {
    return this.http.get<FoodListModelServer[]>(this.url + 'foodlist/' + storeId);
  }

这是我的组件class

export class FoodListComponent implements OnInit {

  foodlist: FoodListModelServer[] = [];
  
constructor(private foodListService: FoodListService, private router: Router, private route: ActivatedRoute) {}

ngOnInit(): void {
    
      this.foodListService.getAllProducts(this.storeId).subscribe(food => {

        this.foodlist = food;
        console.log(this.foodlist);
      });    
   }
}

这是我的component.html

<div class="col-md-8 col-lg-10 col-sm-6 card">
        <li *ngFor="let foodlist of foodlist">
            {{foodlist.food_name}}
            
        </li>
</div>

Console.log(this.foodlist)

我得到并反对 {count: 5, stores: Array(5)}

为什么我得到的计数包括形成对象而不只是数组？

如何只获取数组？

我有与其他组件相同的代码，并且工作正常。我尝试了网上提到的所有方法，但没有任何进展。

Answer 1

Why do I get a count included forming an object instead of just the Array?

这取决于后端API的实现

How do I get only the array?

为 API 的实际响应创建接口并在此处使用 this.http.get<FoodListModelServerResponse>
然后我们可以通过 RxJs map 运算符从响应中提取值 - map(response => response.stores)（在此处查找更多信息：https://www.learnrxjs.io/learn-rxjs/operators/transformation/map）
就是这样，你可以订阅getAllProducts，你会得到数组

import { map } from 'rxjs/operators';

export interface FoodListModelServerResponse {
count: number;
stores: FoodListModelServer[];
}

export class FoodListService {
  private url = environment.serverURL;

  constructor(private http: HttpClient) {
  }

  getAllProducts(storeId: Number): Observable<FoodListModelServer[]> {
    return this.http.get<FoodListModelServerResponse >(this.url + 'foodlist/' + storeId)
.pipe(map(response => response.stores));
  }

然后你就可以使用你的实现了

ngOnInit(): void {
    
      this.foodListService.getAllProducts(this.storeId).subscribe(food => {

        this.foodlist = food;
        console.log(this.foodlist);
      });    
   }
}

Answer 2

使用 RxJs pluck 运算符从响应对象中提取 stores。将 foodlist 变量声明为 foodlist$: Observable<FoodListModelServer[]> 以便它可以分配给 observable。

在食品服务中returnObservable<any>喜欢 getAllProducts(storeId: Number): Observable<any>

import { pluck} from 'rxjs/operators';
import { Observable } from 'rxjs';

export class FoodListComponent implements OnInit {

    foodlist$: Observable<FoodListModelServer[]>;
      
    constructor(private foodListService: FoodListService, private router: Router, private route: ActivatedRoute) {}

    ngOnInit(): void {
          this.foodlist$ = this.foodListService.getAllProducts(this.storeId).pipe(
            pluck('stores')
          ); 
     }
}

在模板使用 Async pipe 中，它将负责订阅和取消订阅您的 foodListService.getAllProducts

<div class="col-md-8 col-lg-10 col-sm-6 card">
    <li *ngFor="let foodlist of foodlist$ | async">
        {{foodlist.food_name}}
    </li>
</div>

尝试区分“[object Object]”时出错。 Angular-11 应用程序中只允许使用数组和可迭代对象

Error trying to diff '[object Object]'. Only arrays and iterables are allowed in Angular-11 Application

javascript

rxjs

typescript

angular-ui-router

angular