如何在表列中使用ng2-dragula

Question

我正在尝试实现一种改变表头的方法。可以只更改Thead，但不能一起更改表的内容。

app.component.ts

  vamps = [
    { name: "Bad Vamp", age: 342, country: "USA" },
    { name: "Petrovitch the Slain", age: 187, country: "BR" },
    { name: "Bob of the Everglades", age: 225, country: "UK" },
    { name: "The Optimistic Reaper", age: 257, country: "JP" }
  ];

app.component.html

<table>
    <thead>
        <tr dragula="VAMPIRES">
            <td>Name</td>
            <td>Age</td>
            <td>Coutry</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let vamp of vamps">
            <td>
                {{vamp.name}}
            </td>
            <td>
                {{vamp.age}}
            </td>
            <td>
                {{vamp.country}}
            </td>
        </tr>
    </tbody>
</table>

stackblitz：https://stackblitz.com/edit/ng2-dragula-base-ftxn1s?file=src%2Fapp%2Fapp.component.html

Answer 1

您的标题列和您的vamp之间没有任何连接。

<table>
    <thead>
    <tr dragula="VAMPIRES" [(dragulaModel)]="columns" >
     <th *ngFor="let column of columns" >
       {{column}}
     </th >
   </tr >
    </thead>
    <tbody>
    <tr *ngFor="let vamp of vamps" >
     <td *ngFor="let column of columns" >
       {{vamp[column]}}
     </td >
   </tr >

    </tbody>
</table>

https://stackblitz.com/edit/ng2-dragula-base-7viccg?file=src%2Fapp%2Fapp.component.html