如何在模板中从 angular 中的 select 元素中获取 selected 项的 selected 计数?
How to get the selected count, in the template, of selected items from select element in angular?
我的模板中有以下标记:
<label for="restCuisine" class="label">Cuisine</label><br/>
{{ getCount(selected) }} selected
<nb-select
multiple
[(selected)]="selected"
formControlName="restCuisine"
id="restCuisine">
<nb-option value="International">International</nb-option>
<nb-option value="Chinese">Chinese</nb-option>
<nb-option value="Greek">Greek</nb-option>
<nb-option value="Middle Eastern">Middle Eastern</nb-option>
<nb-option value="Caribbean">Caribbean</nb-option>
<nb-option value="Asian">Asian</nb-option>
<nb-option value="Local">Local</nb-option>
<nb-option value="Japanese">Japanese</nb-option>
<nb-option value="Mexican">Mexican</nb-option>
<nb-option value="Indian">Indian</nb-option>
<nb-option value="British">British</nb-option>
<nb-option value="European">European</nb-option>
<nb-option value="Italian">Italian</nb-option>
<nb-option value="French">French</nb-option>
<nb-option value="Spanish">Spanish</nb-option>
<nb-option value="Cajun">Cajun</nb-option>
<nb-option value="Thai">Thai</nb-option>
<nb-option value="Mediterranean">Mediterranean</nb-option>
</nb-select>
我正在尝试获取 selected 项目数,如下所示:
selected;
getCount(selected: any) {
return selected.length();
}
但它不起作用。我从网上尝试了不同的例子,但这不是我要找的。我正在考虑使用 ViewChild 引用元素并覆盖元素的更改事件,然后计算 selected 中的项目,但代码太多了。我正在寻找一个或两个班轮。
如何获取 select 元素的 selected 项目数?真正的挑战是仅在模板中执行此操作,但 typescript 也可以。
使用 selectedChange 和插值,答案非常简单。在下面找到答案:
<label for="restCuisine" class="label">Cuisine</label><br/>
<p>{{ restCuisineCount }} selected</p>
<nb-select
multiple
fullWidth
(selectedChange)="onChangeRestCuisine($event)"
formControlName="restCuisine"
id="restCuisine">
<nb-option value="International">International</nb-option>
<nb-option value="Chinese">Chinese</nb-option>
<nb-option value="Greek">Greek</nb-option>
<nb-option value="Middle Eastern">Middle Eastern</nb-option>
<nb-option value="Caribbean">Caribbean</nb-option>
<nb-option value="Asian">Asian</nb-option>
<nb-option value="Local">Local</nb-option>
<nb-option value="Japanese">Japanese</nb-option>
<nb-option value="Mexican">Mexican</nb-option>
<nb-option value="Indian">Indian</nb-option>
<nb-option value="British">British</nb-option>
<nb-option value="European">European</nb-option>
<nb-option value="Italian">Italian</nb-option>
<nb-option value="French">French</nb-option>
<nb-option value="Spanish">Spanish</nb-option>
<nb-option value="Cajun">Cajun</nb-option>
<nb-option value="Thai">Thai</nb-option>
<nb-option value="Mediterranean">Mediterranean</nb-option>
</nb-select>
和打字稿:
restCuisineCount = 0;
onChangeRestCuisine(event: any) {
this.restCuisineCount = event.length;
}
我的模板中有以下标记:
<label for="restCuisine" class="label">Cuisine</label><br/>
{{ getCount(selected) }} selected
<nb-select
multiple
[(selected)]="selected"
formControlName="restCuisine"
id="restCuisine">
<nb-option value="International">International</nb-option>
<nb-option value="Chinese">Chinese</nb-option>
<nb-option value="Greek">Greek</nb-option>
<nb-option value="Middle Eastern">Middle Eastern</nb-option>
<nb-option value="Caribbean">Caribbean</nb-option>
<nb-option value="Asian">Asian</nb-option>
<nb-option value="Local">Local</nb-option>
<nb-option value="Japanese">Japanese</nb-option>
<nb-option value="Mexican">Mexican</nb-option>
<nb-option value="Indian">Indian</nb-option>
<nb-option value="British">British</nb-option>
<nb-option value="European">European</nb-option>
<nb-option value="Italian">Italian</nb-option>
<nb-option value="French">French</nb-option>
<nb-option value="Spanish">Spanish</nb-option>
<nb-option value="Cajun">Cajun</nb-option>
<nb-option value="Thai">Thai</nb-option>
<nb-option value="Mediterranean">Mediterranean</nb-option>
</nb-select>
我正在尝试获取 selected 项目数,如下所示:
selected;
getCount(selected: any) {
return selected.length();
}
但它不起作用。我从网上尝试了不同的例子,但这不是我要找的。我正在考虑使用 ViewChild 引用元素并覆盖元素的更改事件,然后计算 selected 中的项目,但代码太多了。我正在寻找一个或两个班轮。
如何获取 select 元素的 selected 项目数?真正的挑战是仅在模板中执行此操作,但 typescript 也可以。
使用 selectedChange 和插值,答案非常简单。在下面找到答案:
<label for="restCuisine" class="label">Cuisine</label><br/>
<p>{{ restCuisineCount }} selected</p>
<nb-select
multiple
fullWidth
(selectedChange)="onChangeRestCuisine($event)"
formControlName="restCuisine"
id="restCuisine">
<nb-option value="International">International</nb-option>
<nb-option value="Chinese">Chinese</nb-option>
<nb-option value="Greek">Greek</nb-option>
<nb-option value="Middle Eastern">Middle Eastern</nb-option>
<nb-option value="Caribbean">Caribbean</nb-option>
<nb-option value="Asian">Asian</nb-option>
<nb-option value="Local">Local</nb-option>
<nb-option value="Japanese">Japanese</nb-option>
<nb-option value="Mexican">Mexican</nb-option>
<nb-option value="Indian">Indian</nb-option>
<nb-option value="British">British</nb-option>
<nb-option value="European">European</nb-option>
<nb-option value="Italian">Italian</nb-option>
<nb-option value="French">French</nb-option>
<nb-option value="Spanish">Spanish</nb-option>
<nb-option value="Cajun">Cajun</nb-option>
<nb-option value="Thai">Thai</nb-option>
<nb-option value="Mediterranean">Mediterranean</nb-option>
</nb-select>
和打字稿:
restCuisineCount = 0;
onChangeRestCuisine(event: any) {
this.restCuisineCount = event.length;
}