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

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

在angular中属性应该这样定义：-

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

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

 dragulaService.drop.subscribe(
  (args) =>{
    const [bagName, elSource, bagTarget, bagSource, elTarget] = args;
    console.log('id is:', elTarget.dataset.id);
 });

Answer 2

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

只有在 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 类似于模板变量，angular 将与组件文件中的 @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。

Use this API as the last resort when direct access to DOM is needed. Use templating and data-binding provided by Angular instead. Alternatively you can take a look at Renderer2 which provides API that can safely be used even when direct access to native elements is not supported. Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker.

From Angular docs link

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

How to get attribute values from html in angular 4

javascript

ng2-dragula

angular

.*html 文件

*.component.ts