4

我正在做 angular 4 项目，我需要拖动项目，所以我使用 ng2-dragula 插件为我做这件事。现在我需要在下降到特定位置后从每一行中提取 data-id 属性。

 dragulaService.drop.subscribe(
      (args) =>{
        const [bagName, elSource, bagTarget, bagSource, elTarget] = args;
        console.log('after', $(bagSource)); // element after the inserted element
});

在 $bagSource 变量中，我将以新的顺序获取每一行。说吧

<tr attributes  data-id="23"><tr>
<tr attributes  data-id="2"><tr>
<tr attributes  data-id="32"><tr>

我如何从每个 tr 字段中提取数据 ID 。我需要以数组中的新顺序获取每个 id。我要求的结果应该是 [23,2,32]；

jquery $(element).attr("data-id") 在角度 4 中等效。

4

2 回答 2

5

jquery $(element).attr("data-id")可以用@ViewChild一些老式的 javascript来实现类似的东西。它看起来像：

drag zone仅在不相关时才使用此table选项（如果使用 @user3263307 回答，则更多Angular-friendly）。但是，最好的选择是使用[attr.data-id]="someVariable"，但由于我不知道您的应用程序结构无法帮助您实现此方法。

.*html 文件

<table #tableRef>
    <tr attributes  [attr.data-id]="23"><tr>
    <tr attributes  [attr.data-id]="2"><tr>
    <tr attributes  [attr.data-id]="32"><tr>
</table>

#tableRef就像模板变量一样，它的角度将与组件文件中的@ViewChild 绑定。

*.component.ts

@ViewChild() tableRef: ElementRef;

    public getIds() {
        if (!this.tableRef|| !this.tableRef.nativeElement)
            return;
        //assuming that table would have only one `tbody` tag.
        let tableBody = this.tableRef.tBodies[0];
        if (!tableBody)
           return;

        // we need to use Array.from, because `.children` returns HTMLCollection<Element>
        // type which is not handy to iterate through it.

        let childs: Array<HTMLTableSectionElement> = Array.from(tableBody.nativeElement.children);
        let arrIds = [];
        for(let child of childs) {
            if (!(child.nodeName && child.nodeName.toLowerCase() == "tr"))
                continue;

            arrIds.push(child.dataset.id);
        }
    }

请注意，对于 Angular，这是一种有点残酷的方法，因为最好不要干扰 HTML DOM 结构。但是，只要我们只从元素中获取数据，一切都应该没问题。

请注意，关于使用@ViewChild.

当需要直接访问 DOM 时，将此 API 用作最后的手段。改用 Angular 提供的模板和数据绑定。或者，您可以查看 Renderer2，它提供了即使不支持直接访问本机元素也可以安全使用的 API。依赖直接 DOM 访问会在您的应用程序和渲染层之间创建紧密耦合，这将使得无法将两者分开并将您的应用程序部署到 Web Worker 中。

从Angular docs 链接

于 2017-11-30T07:13:36.317 回答
-1

在角度属性应该这样定义： -

<tr attributes  [attr.data-id]="23"><tr>

并且可以使用 Eventtarget 对象的 dataset 属性访问属性：-

 dragulaService.drop.subscribe(
  (args) =>{
    const [bagName, elSource, bagTarget, bagSource, elTarget] = args;
    console.log('id is:', elTarget.dataset.id);
 });
于 2017-11-30T06:18:57.303 回答