如何从角度4中的html获取属性值

Question

我正在做 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 字段中提取 data-id。我需要以数组中的新顺序获取每个 id。 我要求的结果应该是 [23,2,32];

jquery $(element).attr("data-id") 等效于 Angular 4。

Answer 1

类似于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 docslink

Answer 2

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

<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);
 });