Question

当我点击select时如何打开label？

<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>

谢谢您的帮助，我迷路了

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>

有关如何与标签一起使用的更多信息，请参见官方MDN on labels。

Answer 2

找到了一篇与您所要求的内容相似的文章，但您必须将标签作为选择项的父项？

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

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

然后，当您单击标签时，它会触发事件以通过this.thatRef.nativeElement.click()在select上触发点击事件吗？

Angular 4-打开标签选择

2 个答案: