Question

根据我的客户要求，我们正在处理一些自定义表，但我陷入了嵌套行中。

当我单击该加号时，该特定行的行应绑定到下一行...

我的数据采用以下格式：

tabledata = [
    {
      reference: "191782-01", name: "American Electric LLC", assigned: "Rusty", Ship: "PKUP", Open: "15", total: "30", percentage: "50", staged: "1/4", datetime: "07/25/18 7:51 AM",
       child: [{
        reference: "191782-01", name: "American Electric LLC", assigned: "Rusty", Ship: "PKUP", Open: "15", total: "30", percentage: "50", staged: "1/4", datetime: "07/25/18 7:51 AM"
      },
      {
        reference: "191782-01", name: "American Electric LLC", assigned: "Rusty", Ship: "PKUP", Open: "15", total: "30", percentage: "50", staged: "1/4", datetime: "07/25/18 7:51 AM"
      }]
    },
    { reference: "191780-02", name: "Good Business Company", assigned: "", Ship: "WISE", Open: "8", total: "8", percentage: "0", staged: "1/2", datetime: "07/25/18 8:12 AM", child: [] },
    { reference: "191782-02", name: "Cecchin Plumbing", assigned: "", Ship: "PKUP", Open: "23", total: "36", percentage: "36", staged: "1/3", datetime: "07/25/18 8:01 AM", child: [] },
    { reference: "191780-01", name: "Company Name 1", assigned: "MULTI", Ship: "PKUP", Open: "1", total: "1", percentage: "0", staged: "2/4", datetime: "07/25/18 8:05 AM", child: [] },
    { reference: "191702-02", name: "Leep's Supply", assigned: "MULTI", Ship: "WISE", Open: "3", total: "6", percentage: "50", staged: "2/4", datetime: "07/25/18 8:46 AM", child: [] }
  ]

当我单击加号图标时，我需要子对象可见

我的Angular代码：

    <tbody>
            <tr *ngFor="let data of tabledata">
              <td class="text-left"><a href="javascript:void(0)">{{data.reference}}</a><span *ngIf="data.reference.includes('191782')"
                  class="badge badge-warning win-badge win-badge-warning win-badge-large ml-3"
                  style="border-radius: 1.4rem">Urgent</span></td>
              <td>{{data.name}}</td>
              <td><span [ngClass]="{'badge badge-secondary win-badge win-badge-secondary': data.assigned=='MULTI', 'bgtrans': data.assigned!='MULTI'}">{{data.assigned}}</span></td>
              <td>{{data.Ship}}</td>
              <td><span [ngClass]="{'alert alert-error mobile-error alert-dismissible': data.Open>10, 'bgtrans': data.Open<10}">{{data.Open}}</span></td>
              <td>{{data.total}}</td>
              <td>{{data.percentage}}</td>
              <td>{{data.staged}}</td>
              <td>{{data.datetime}}</td>
              <td><a href="javascript:void(0)"
                  *ngIf="data.child.length>0"><i class="fa fa-plus-square-o"></i></a> </td>
    </tr>
</tbody>

Answer 1

您可以先映射数组，以将其转换为平面数组，然后绑定到结果数组：

// pass a function to map
let arrays = tabledata.map(x => new Array(x).concat(x.child));

let flatTableData = [].concat.apply([], arrays);

要确定子行，只需查找没有child属性的行

HTML自定义表中的嵌套行

1 个答案: