Angular 4 中同一行中的多个数据

Question

我需要帮助，因为我需要在同一行中实现多个数据。我有可能实现这一目标吗？我做了一个示例代码，但问题是 headers 的数量和杯子尺寸没有正确对齐。我可以只使用 angular 和表格来对齐它还是应该强制它与 CSS 对齐？我需要像下图这样实现。

JSON 响应：

{
  "company_name": "Rizul Burmeze Jucies and Foods",
  "reports": [
    {
      "outlet_name": "Outlet 1",
      "outlet_cup_sales": [
        {
          "quantity": 3,
          "cup_name": "Small Plastic Cup"
        },
        {
          "quantity": 5,
          "cup_name": "Regular Plastic Cup"
        }
      ]
    },
    {
      "outlet_name": "Outlet 2",
      "outlet_cup_sales": [
        {
          "quantity": 3,
          "cup_name": "Grande Plastic Cup"
        },
        {
          "quantity": 5,
          "cup_name": "BBZ Plastic Cup"
        }
      ]
    }
  ]
};

代码:

<div class="col-lg-12 table-responsive">
  <table class="table m-0">
    <thead>
      <tr>
        <th>OUTLET</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let response of filter_date_response?.reports">
        <td>{{ response?.outlet_name }}</td>
        <td>
          <table class="table m-0 no-border"  width="100%">
            <tbody>
              <tr *ngFor="let res of response?.outlet_cup_sales">
                <td class="no-border"> {{ res?.cup_name }} </td>
                <td class="no-border"> {{ res?.quantity }} </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您可以使用 rowspan HTML 属性执行此操作。

通过将 rowspan="2" 放在 Outlet 1 单元格上，这意味着它应该有 2 个单元格高。

td {
   border: 1px solid black;
   padding: 5px;
}

<table>

  <tbody>
    <tr>
      <td rowspan="2">Outlet 1</td>
      <td>BBZ</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Regular</td>
      <td>2</td>
    </tr>
    
  </tbody>
</table>

Answer 2

不需要使用嵌套表格。您可以使用 rowspan ( w3schools ) 来获得相同的结果。

<table class="table m-0">
    <thead>
      <tr>
        <th>OUTLET</th>
        <th>Size</th>
        <th>Count</th>
      </tr>
    </thead>
    <tbody>
        <ng-container *ngFor="let response of filter_date_response?.reports">
        <tr *ngFor="let res of response.outlet_cup_sales; let i = index">
          <td *ngIf="i == 0" [attr.rowspan]="response.outlet_cup_sales.length"> 
            {{ response?.outlet_name }} 
          </td>
          <td> {{ res?.cup_name }} </td>
          <td> {{ res?.quantity }} </td>
        </tr>
      </ng-container>
    </tbody>
</table>

您可以通过更改 header 来更改列大小。

试一试Here

Angular 4 中同一行中的多个数据

Multiple Data in Same Row In Angular 4

angular

angular4-forms

angular-template