渲染表与正确的循环

Question

我有一个如下数组：

public products: any = [
{title: 'Product_1', desc: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry', img: '../assets/prod_1.jpg', property_1: 50, property_2: 6, property_3: 0, property_4: 76, property_5: 54, property_6: 87, property_7: 0},
{title: 'Product_2', desc: 'Lorem Ipsum has been the industrys standard dummy text ever since the 1500s', img: '../assets/prod_2.jpg', property_1: 0, property_2: 0, property_3: 65, property_4: 0, property_5: 0, property_6: 7, property_7: 88},
{title: 'Product_3', desc: 'It has survived not only five centuries but also the leap into electronic typesetting', img: '../assets/prod_3.jpg', property_1: 0, property_2: 97, property_3: 0, property_4: 56, property_5: 0, property_6: 0, property_7: 86},
{title: 'Product_4', desc: ' It was popularised in the 1960s with the release of Letraset sheets containing,', img: '../assets/prod_4.jpg', property_1: 90, property_2: 25, property_3: 56, property_4: 64, property_5: 0, property_6: 98, property_7: 0},
]

我正在尝试从中呈现一个表格如下：

<table>
  <ng-template let-product ngFor [ngForOf]="products">

    <td>
      <h5>{{product.title}}</h5>
      <img src="{{product.img}}" height="200" width="300" border="1">
      <h6>{{product.desc}}</h6>
    </td>

  </ng-template>
</table>

但是这不是我想要的。我想将它显示如下：

如何编写ngFor循环来实现此目的？

Answer 1

你可以尝试：

const data = [["customer1",29349,3654],["customer2",29349,3654],["customer3",15178,130]];

let reduced = data.reduce((results, arr) => {
   results[0].data.push(arr[1]);
   results[1].data.push(arr[2]);
   return results;
}, [{ category: 'Resolved before conciliation', data : [] }, { category: 'Conciliation successful', data : [] }]);

console.log(reduced);

使用：

<table *ngIf="keyList && products">
  <ng-template let-product ngFor [ngForOf]="products">
    <td>
      <h5>{{product.title}}</h5>
      <img src="{{product.img}}" height="200" width="300" border="1">
      <h6>{{product.desc}}</h6>
    </td>
  </ng-template>
  <ng-container *ngFor="let key of keyList" >
   <tr>
    <td *ngFor="let item of products">
        {{item[key]}}
    </td>
   </tr>
 </ng-container>
</table>