如何在模板中从 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;
}