如何获取 <a> 元素中的属性值？答案

【问题标题】：How to get attribute value in <a> element?如何获取 <a> 元素中的属性值？
【发布时间】：2020-02-22 00:01:55
【问题描述】：

如何获取 data-set 属性的值或在链接中使用以下结构更改它： <a href='#' data-set='22'>Text</a>

我知道在 jquery 中我可以使用： $('a').attr ('data-set');

要更改您的内容： $('a').attr ('data-set', '01');

但在 Ionic4 中我没有得到它，已经研究过并且不能完全做到这一点。

谁能帮帮我？

【问题讨论】：

标签： ionic-framework attributes ionic4

【解决方案1】：

在原生 JavaScript 中你可以这样做

要获取属性，请使用document.querySelector('a').getAttribute('data-set'); 并设置属性使用document.querySelector('a').setAttribute('data-set', '01');

【讨论】：

但是，如何在具有 Angular 结构的 IONIC4 中做到这一点？这是我的问题。
这里有一些关于角度属性的细节techiediaries.com/add-access-html-data-attribute-angular

【解决方案2】：

您可以使用HTMLElement.dataset

假设你有<a href='#' id="mylink" data-set='22'>Text</a>

let elem = document.querySelector('#mylink');

//get
el.dataset.set

//set
el.dataset.set = "01"

注意：部分浏览器可能不支持HTMLElement.dataset，请在投入生产前测试

【讨论】：

但是，如何在具有 Angular 结构的 IONIC4 中做到这一点？这是我的问题。

【解决方案3】：

已解决：

我是这样做的：

<ion-input #myInput data-set="01"></ion-input>

@ViewChild ('myInput', { read: ElementRef }) myInput: ElementRef;


ngAfterContentInit() {
   console.log(this.myInput.nativeElement.dataset.dta1); 
}

【讨论】：

【解决方案4】：

在 HTML 文件中，

<ul>
  <li #messageEl *ngFor="let message of messages" [attr.data-message-id]="message.id">
{{ message.text }}
<br><button (click)="logMessageId(messageEl)">Console Log </button>
  </li>
</ul>

在 .ts 文件中，

logMessageId(el){
  let messageId = el.getAttribute('data-message-id');
  //let messageId = el.dataset.messageId;
  console.log("Message Id: ", messageId);
}

【讨论】：