Angular не удалось отобразить данные в JSON в таблице

Question

Я не могу правильно отобразить данные в таблице есть некоторые пустые строки в таблице, я не знаю, как они идут после каждой строки продукта

есть ли проблема в ngfor l oop или проблема с моделью моего продукта , если это не решено, то есть ли другой способ отобразить вложенный json в angular в формате таблицы

    <th scope="col">Company</th>
    <th scope="col">Description</th>
    <th scope="col">Type</th>
    <th scope="col">Case</th>
    <th scope="col">Quantity</th>
    <th scope="col">U/M</th>
    <th scope="col">Rate</th>
    <th scope="col">Retension</th>
    <th scope="col">New Rate</th>
    <th scope="col">My Retension</th>
    <th scope="col">Final Rate</th>
    <th scope="col">Retail Rate</th>
    <th scope="col">Remarks</th>
    <th scope="col">Edit Product</th>
    <th scope="col">Delete Product</th>
  </tr>
</thead>



<tbody  *ngFor="let product of productdata| keyvalue;">


  <tr *ngFor="let productdescription of product.value|keyvalue;">

      <td> {{productdescription.value.company}}</td>
      <td>{{productdescription.value.description}}</td>
      <td>{{productdescription.value.type}}</td>
      <td>{{productdescription.value.productcase}}</td>
      <td>{{productdescription.value.quantity}}</td>
      <td>{{productdescription.value.units}}</td>
      <td>{{productdescription.value.rate}}</td>
      <td>{{productdescription.value.retension}}</td>
      <td>{{productdescription.value.newrate}}</td>
      <td>{{productdescription.value.myretension}}</td>
      <td>{{productdescription.value.finalrate}}</td>
      <td>{{productdescription.value.retailrate}}</td>
      <td>{{productdescription.value.remarks}}</td>
      <td><button type="button" class="btn btn-primary" (click)="onEdit(product.value.pk)">Edit</button></td>
      <td><button type="button" class="btn btn-primary" (click)="onDelete(product.value.pk)">Delete</button></td>
  </tr>


</tbody>

модель продукта

export interface ProductData{
  model:string;
  pk:string;
  fields:Product;
}
export interface Product{
   productId:string;
   company: string;
   description:string;
  type: string;
  productcase: number;
   quantity: number;
   units: string;
   rate: number;
   retension: number;
   newrate: number;
  myretension: number;
   finalrate: number;
   retailrate:number;
  remarks:string;



}

функция для извлечения данных

viewProducts():Observable<ProductData>{
    return this.http.get('http://192.168.0.15:8000/view/').pipe(map(data => <ProductData>data));

  }

 fetchTable(){
    this.productService.viewProducts().subscribe(
      (response) =>
      {

      console.log(response);
      this.productdata= response;

      }
    );
  }

Answer 1

Я не знаю, почему вы реализовали несколько l oop там. Попробуйте этот код ниже. Надеюсь, что это работает. Также поделитесь экранами ошибок, снятыми для лучшего понимания.

<th scope="col">Company</th>
        <th scope="col">Description</th>
        <th scope="col">Type</th>
        <th scope="col">Case</th>
        <th scope="col">Quantity</th>
        <th scope="col">U/M</th>
        <th scope="col">Rate</th>
        <th scope="col">Retension</th>
        <th scope="col">New Rate</th>
        <th scope="col">My Retension</th>
        <th scope="col">Final Rate</th>
        <th scope="col">Retail Rate</th>
        <th scope="col">Remarks</th>
        <th scope="col">Edit Product</th>
        <th scope="col">Delete Product</th>
      </tr>
    </thead> 
<tbody  *ngIf="productdata">
  <tr *ngFor="let productdescription of productdata; let i = index">
      <td> {{productdescription.fields.company}}</td>
      <td>{{productdescription.fields.description}}</td>
      <td>{{productdescription.fields.type}}</td>
      <td>{{productdescription.fields.productcase}}</td>
      <td>{{productdescription.fields.quantity}}</td>
      <td>{{productdescription.fields.units}}</td>
      <td>{{productdescription.fields.rate}}</td>
      <td>{{productdescription.fields.retension}}</td>
      <td>{{productdescription.fields.newrate}}</td>
      <td>{{productdescription.fields.myretension}}</td>
      <td>{{productdescription.fields.finalrate}}</td>
      <td>{{productdescription.fields.retailrate}}</td>
      <td>{{productdescription.fields.remarks}}</td>
      <td><button type="button" class="btn btn-primary" (click)="onEdit(productdata[i].pk)">Edit</button></td>
      <td><button type="button" class="btn btn-primary" (click)="onDelete(product.value.pk)">Delete</button></td>
  </tr>


</tbody>