Angular 4 - 点击标签打开下拉选择框

Question

当我点击标签时，如何打开呢？<label>filter per category: <span>{{ articleListService.selectedCategory }}</span></label> <select #category (change)="articleListService.categoryFilter2()" [(ngModel)]="articleListService.formModel.category"> <option value="">All</option> <option *ngFor="let category of articleListService.laCategoryList" value="{{ category.id }}"> {{ category.name }} </option> </select> 感谢您的帮助，我有些迷失了。

- orphen92300

Answer 1

好问题，这更多是HTML 5的事情而不是Angular的事情。您将要使用for={id}。

因此，在您的特定代码中，它看起来会像这样。

<label for="category">filter per category: [cat group shows here]</label>

<select id="category" #category (change)="articleListService.categoryFilter2()" [(ngModel)]="articleListService.formModel.category">
  <option value="">All</option>
  <option *ngFor="let category of articleListService.laCategoryList" value="{{category.id }}">
    {{ category.name }}
  </option>
</select>

• 如需了解如何在标签中使用for，请参考官方MDN on labels。

- JGoose

---

这实际上并不起作用，无论是在纯HTML中还是在React中都是如此。我不知道Angular是否也是同样的情况。 - Slbox

这并不会打开选项列表，只是将焦点放在选择元素上。 - Akhi Akl

Answer 2

找到了一篇与您所问的类似的文章，但您必须将标签作为选择器的父级？

https://medium.com/browserquirks/browserquirk-programmatically-opening-a-select-box-4ca745a8468f

或者尝试将模板引用添加到 select 上，然后 @ViewChild('ThatReference') thatRef: ElementRef;

接着当你点击标签时，触发事件来通过 this.thatRef.nativeElement.click() 触发 select 的点击事件？

- Taranjit Kang