组件值更改功能被触发两次

Question

我的模板中有这个循环，可以创建一个剑道下拉列表

<ng-template ngFor let-item [ngForOf]="definitionDetails.Groupings" let-i="index">
    <div *ngIf="max-1 >= i && (definitionDetails.Groupings[i-1] || i === 0)"class="col-xs-10 col-sm-10 col-md-10 marginbottom-15 right">
        {{ i }}
        <kendo-combobox [data]="data"
                        [textField]="'Name'"
                        [valueField]="'Type'"
                        [(value)]="definitionDetails.Groupings[i]"
                        (valueChange)="groupingValueChangeHandler($event, i)">

        </kendo-combobox>
        <span *ngIf="definitionDetails.Groupings[1]">
            <i class="fa clickable group-descending"
               aria-hidden="true"
               [class.fa-sort-alpha-asc]="!definitionDetails.Groupings[i].Descending"
               [class.fa-sort-alpha-desc]="definitionDetails.Groupings[i].Descending"
               (click)="groupingDescendingChangeHandler(1)">

            </i>
        </span>
    </div>
</ng-template>

下拉列表中有(valueChange)但是对于某些原因，它会连续两次触发。 (valueChange)执行此功能：

public groupingValueChangeHandler(value: any, i: number) {
    console.log(value);
    console.log(i);
    if (typeof value === "undefined") {
        if (i === 0) {               
            i = 1;
        }
        this.definitionDetails.Groupings.length = i;
    }
}

在我的控制台中，我可以看到发生了这种情况：

因此，由于某种原因，它会以未定义的值第二次触发。

如何解决此问题并摆脱第二次触发？