Angular 7 获取组件模板端的元素id值

Question

是否可以在模板本身（不是 .ts 端）中获取 html 元素的 id 值？看这个例子：

<div class="fillable-area">
  <textarea id='middle_name' required>{{ dataService.getUserField('middle_name') }}</textarea>
  <label for="middle_name">Middle name</label>
</div>

我有一个 id 元素，它与我的数据服务的 getUsetField() 参数的名称完全相同。有很多这样的元素，所以我认为能够做这样的事情会很好（只是为了不再重复自己）：

<textarea id='middle_name' required>{{ dataService.getUserField(this.id) }}</textarea>

我需要它能够遍历我所有的数据字段（来自数据库并存储在对象中），获取它们的键名并在模板中找到相应的字段。

Answer 1

可以在 template reference variable 的帮助下完成。在下面的示例中，变量 txt 是为 textarea 元素定义的，用于获取元素的 id：

<textarea #txt id="middle_name" required>{{ dataService.getUserField(txt.id) }}</textarea>

Angular 7 获取组件模板端的元素id值

Angular 7 get element id value in component's template side

angular2-template

angular

angular7