如何计算所选项目的数量并在标签中显示

Question

我正在使用IONIC3。我有一个离子选择与多个。现在无论我选择什么以逗号分隔值显示。但是我想以这种格式显示，例如如果选择了 2，那么它应该显示 '已选中 2 个，共 6 个">

  <ion-item>
    <ion-label>Toppings</ion-label>
    <ion-select [(ngModel)]="toppings" multiple="true">
      <ion-option>Bacon</ion-option>
      <ion-option>Black Olives</ion-option>
      <ion-option>Extra Cheese</ion-option>
      <ion-option>Mushrooms</ion-option>
      <ion-option>Pepperoni</ion-option>
      <ion-option>Sausage</ion-option>
    </ion-select>
  </ion-item>

谁能帮我怎么做。

Answer 1

这是解决方案：

组件.html

  <ion-item>
    <ion-label>Toppings</ion-label>
    <ion-select [(ngModel)]="toppings" multiple="true" [selectedText]="textToDisplay" (ionChange)="onSelectChange($event)">
      <ion-option *ngFor="let option of options">{{option}}</ion-option>
    </ion-select>
  </ion-item>

组件.ts

export class HomePage {
  toppings:any;
  selectedOptions:any=[];
  options=[
    "Bacon",
    "Black Olives",
    "Extra Cheese",
    "Mushrooms",
    "Pepperoni",
    "Sausage"
  ];
  textToDisplay:string='';
  constructor(public navCtrl: NavController) {
  }
  onSelectChange(selectedValue: any) {
    this.textToDisplay = "Selected "+selectedValue.length+" of "+this.options.length;
  }
}

这是堆栈闪电战链接。