Question

我正在使用最新版本的制表器表格（来自其站点的4.2），并试图将按钮插入每个项目的单独列中，该按钮将根据项目ID路由到唯一的路由。所以例如：如果每个项目都有一个ID和一个名称，我想在一个栏中显示“名称”，然后显示一个将路由到“ details / {{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的页面。我从未真正使用过该表包，但这将是通常的方式。希望这会提供一些指导。

如何使用来自该行的数据将按钮插入到制表器表的每一行中

1 个答案: