javascript - 如何执行* ngFor以便从服务器获取所有数据？ Angular 7

我尝试执行简单的* NgFor以便将我的数据整理到表中，导致出现错误：ERROR错误：找不到类型为'object'的其他支持对象'[object Object]'。 NgFor仅支持绑定到Iterables，例如数组。

这是我的HTML代码：

<table>
  <tr>
      <th>ID</th>
     <!--- <th> Title </th>-->
      <th>Start date</th>
      <th>End date</th>
      <th>Amount</th>
      <th>Coupon Type</th>
      <th>Message</th>
      <th>Price</th>
      <th>Image</th>
      <th>Company Id</th>
  </tr>

  <tr *ngFor="let coupon of allCoupons">
      <td>{{coupon.id}}</td>
     <!-- <td>{{coupon.title}}</td>  -->
      <td>{{coupon.startDate}}</td>
      <td>{{coupon.endDate}}</td>
      <td>{{coupon.amount}}</td>
      <td>{{coupon.type}}</td>
      <td>{{coupon.message}}</td>
      <td>{{coupon.price}}</td>
      <td>{{coupon.image}}</td>
      <td>{{coupon.companyId}}</td>
  </tr>
</table>

这是我的组件：

export class SearchCouponComponent implements OnInit {
  public allCoupons:Coupon[];
  public coupon: Coupon = new Coupon();


  constructor(private myCouponService:CouponService) {
   }

   ngOnInit() {
    this.myCouponService.getAllCoupon().subscribe(data =>{
      alert("inside")
      console.log(data);
      this.allCoupons = data;
      //this.allCoupons= Array.of(this.allCoupons);
      console.log("coupons are:"+this.allCoupons);
    })
  }
}

这是我的服务：

public getAllCoupon ():Observable<Coupon[]> {
    return this.myHttpClient.get<Coupon[]>("http://localhost:8080/couponProject/rest/loggedin/coupons");
  }

console.log(data) ==> {coupons: Array(5)}的结果
console.log("coupons are:"+this.allCoupons) ==> [object Object]的结果

最佳答案

如日志输出所示，data是一个对象，其中一个字段coupons包含一个数组。

将this.allCoupons = data;更改为this.allCoupons = data.coupons;，以便allCoupons包含一个数组。

关于javascript - 如何执行* ngFor以便从服务器获取所有数据？ Angular 7，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57574024/