0

我将 ionic 5 和 angular 11 用于前端和后端 laravel api crud，对于我的后端它运行良好我无法在这个问题中遇到任何错误我无法在页面中显示数据但我得到了它安慰

这是我的页面annonce.ts **

import { Component, OnInit } from '@angular/core';
import { AnnonceService } from '../annonce.service';

@Component({
selector: 'app-annonce',
templateUrl: './annonce.page.html',
styleUrls: ['./annonce.page.scss'],
})
export class AnnoncePage implements OnInit {
productData:any;  


constructor(
  private service:AnnonceService,
) { }

ngOnInit() {}
ionViewWillEnter(){
this.getAllProduct()
}
getAllProduct(){
  this.service.getAllProduct().subscribe(res=>{
    console.log(res)
    this.productData=res
    this.productData = Array.of(this.productData); 

  })
}
deleteProduct(id){
  this.service.deleteProduct(id).subscribe(res=>{
    console.log(res)
            this.productData=res

    //mise a jour d'annonce
    this.getAllProduct()
    
  })
}
}

这是annonce.service.ts

getAllProduct():  Observable<Product>{
return this.http.get<Product>(this.api_URL).pipe(retry(2), catchError(this.handleError)) }

这是annonce.html

<ion-list>
<ion-item-sliding *ngFor="let item of productData">
  <ion-item>
    <ion-label> 
      <h2>{{item.title}}</h2> 
      <h2>{{item.descripton}}</h2> 
      <p>{{item.price}}</p> 
    </ion-label>
    <ion-note slot="end">
      detailleProduct
    </ion-note>
  </ion-item>

  <ion-item-options>
    <!--edit-->
    <ion-item-option>
      <ion-icon slot="icon-only" name="create" [routerLink]="['/','edit-annonce', item.id]"> </ion-icon>
    </ion-item-option>
    <!--delete-->
    <ion-item-option color="danger"> 
      <ion-icon slot="icon-only" name="trash" (click)="deleteProduct(item.id)"> </ion-icon>
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

浏览器图片

4

1 回答 1

0

我猜你this.productData的处理不当。在您的回复中，您会获得登录到控制台并分配给的数据this.productData：

{
  data: [{...}] some array,
  links: {...},
  meta: {...}
} // response object

在下一行中this.productData = Array.of(this.productData);，您将其分配给this.productData（备注[]）：

 [{
  data: [{...}],
  links: {...},
  meta: {...}
 }] 
// array of responses

您可能希望这样做以从响应中获取数据

this.productData = res.data;
于 2021-04-20T15:20:32.380 回答