Как вставить кнопку в каждую строку таблицы Tabulator, используя данные из указанной строки - PullRequest
Новая
       32

Как вставить кнопку в каждую строку таблицы Tabulator, используя данные из указанной строки

0 голосов
/ 12 апреля 2019

Я использую последнюю версию таблиц-таблиц (4.2 с их сайта) и пытаюсь вставить кнопку в отдельный столбец для каждого элемента, который будет перенаправлять на уникальный маршрут на основе идентификатора элемента. Так, например: если у каждого элемента есть идентификатор и имя, я хочу отобразить имя в одном столбце, а затем кнопку, которая будет перенаправлять что-то вроде «details / {{id}}». Я также на Angular7 в данный момент. Мои навыки Angular по взаимодействию с DOM несколько слабые, и я думаю, что именно это мешает мне решить эту проблему.

1 Ответ

0 голосов
/ 12 апреля 2019

Вам нужно будет сделать что-то вроде этого. 

<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

Это будет циклически проходить по проектам массива и для каждогобудет отображать данные.При нажатии на иконку с надписью edit он перейдет на страницу с соответствующим Id для этого элемента.Я никогда не использовал этот пакет таблиц, но так было бы, как обычно.Надеюсь, что это даст некоторое руководство.

...