如何在 table 列中使用 ng2-dragula

Question

我正在尝试实现一种更改 table header 的方法。仅更改 Thead 是可能的，但同时更改 table 的内容不成功。

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>

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

Answer 1

你的 header 专栏和你的鞋面之间没有联系。

<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

如何在 table 列中使用 ng2-dragula

How to use ng2-dragula in table columns

ng2-dragula

angular