如何使用来自所述行的数据将按钮插入Tabulator表的每一行

Question

我正在使用最新版本的制表符表（来自他们网站的4.2），并且我正在尝试将按钮插入到每个项目的单独列中，这将根据项目ID路由到唯一的路径。例如：如果每个项目都有ID和名称，我想在一列中显示名称，然后在一个按钮上显示“详情/ {{id}}”。我现在也在Angular7上。我与DOM交互的Angular技能有点弱，我认为这是阻止我解决这个问题的原因。

Answer 1

你需要做这样的事情。

<div class="card-block">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Project Name</th>
        <th>Material ID</th>
        <th>Unit</th>
        <th>Quantity</th>
        <th>Total Quantity</th>
          <th>Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let project of projects">
        <td>{{ project.name }}</td>
        <td>{{ project.material_projects.material_id}}</td>
        <td>{{ project.material_projects.unit }}</td>
        <td>{{ project.material_projects.quantity }}</td>
        <td>{{ project.material_projects.total }}</td>
<td><i [routerLink]="['/project', project.id]">edit</i></td>
      </tr>
    </tbody>
  </table>
</div>

然后你的路由器需要反映该路径

path: project/:id

这将循环遍历数组项目，并为每个项目显示数据。当按下显示编辑的图标时，它将导航到具有该项目的相应Id的页面。我从来没有真正使用过该表包，但这就是它正常完成的方式。希望这会给一些指导。