Question

这里的最佳做法是什么？ {{1}}版似乎有点矫枉过正，我不了解实现它的代码。另一方面，我在整个应用程序中寻找可重用的东西，因为有多个表有多种数据类型。

Answer 1

如果您尚未最终确定图书馆，我建议您查看Datagrid component中的Project Clarity。它是一个功能强大的组件，具有许多功能，包括分页。

Answer 2

对于Tables，我建议简单地使用包含带有* ngFor循环的Bootstrap网格的共享组件。

<div class="row listview">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <table id="myTable" class="table table-bordered">
          <thead>
         //CREATES TABLE HEADERS
            <tr class="table-head-color">
              <th *ngFor="let columns of data?.display_columns; let i = index">
                {{ columns }}
                <br>
              </th>
            </tr>
            //THIS WILL CREATE CORRESPONDING DATA TO IT
            <tr *ngFor="let row1 of data?.row1; let i= index">
              <td style="white-space: nowrap" *ngFor="let columns of data?.display_columns; let i = index">
                </span>
                <span *ngIf="columns != 'someObject1'">{{ row1[columns] }}</span>
              </td>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>

您可以重复使用此操作并根据方便操作数据。我也看了几个图书馆，似乎是一种矫枉过正对于简单的数据显示，外部库是好的，但是当涉及到事件绑定时，会发生混淆对于分页，您可以查看Bootstrap分页如果要以某种方式显示它，可以很好地在Component.ts中编写函数，并将它们与要调用它们的HTML标记绑定。
希望这能回答你的问题。

Angular 4/5中具有分页组件的可重用数据表的建议

2 个答案: