[英]How to use ng2-dragula in table columns
I am trying to implement a way to change the table header.我正在尝试实现一种更改表 header 的方法。 Changing only the
Thead
is possible but changing the contents of the table together was not successful.仅更改
Thead
是可能的,但一起更改表的内容并不成功。
app.component.ts 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 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 stackblitz: https://stackblitz.com/edit/ng2-dragula-base-ftxn1s?file=src%2Fapp%2Fapp.component.html
There is no connection between your header columns and your vamps.您的 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 https://stackblitz.com/edit/ng2-dragula-base-7viccg?file=src%2Fapp%2Fapp.component.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.