如何在Angular 6中随单击事件更新ngModel

我无法创建stackblitz，因为我使用的是非开源的第三方组件库。我正在使用一个来自该库的multiselect组件，它非常类似于Priming的multiselect组件

以下是HTML：

<lib-multiselect [(ngModel)]="fruit" name="fruit" modelChange="multiselectModelChange">
    <lib-multiselect-option (onSelectionChange)="onSelectionChange($event)" *ngFor="let fruit of fruits" [value]="fruit">
        <span>{{ fruit?.name }}</span>&nbsp;
    </lib-multiselect-option>
</lib-multiselect>

---

我的问题是，它正在落后一步打印。我的意思是，当我选择第一个选项时，数组

水果

为空，但当我选择第二个选项，即梨，则数组包含

苹果

，这意味着当我选择第三个选项，即瓜，则数组包含[“苹果”，“梨]。为什么总是落后一步。请帮帮我。

我认为您在选项上使用了

事件

您不能在

选项上绑定事件

将其添加到具有

ngModel

{{item.name}

在上面的示例中，我们创建了一个多选选项，并直接在其上使用

change

事件

public fruits = [
    {name: 'Apple'},
    {name: 'Pear'},
    {name: 'Melon'},
    {name: 'Orange'},
    {name: 'Banana'}
];

public fruit = [
   
];

onSelectionChange(e) {
    console.log(this.fruit);
}

<select [(ngModel)]="sample" (change)="handler()" multiple>
  <option *ngFor="let item of items" [value]="item.id">{{item.name}}</option>
</select>