Несколько API вызываются с (изменение) в angular

Question

При выборе любой даты и нажатии enter должен быть выполнен вызов API. И при нажатии на нее в input есть значок x, он должен вызывать API с датой 01/01/12. Также есть функция, например, если вы наберете 2/3 и нажмете enter, это автоматически сделает его 02/03/20 , Проблема в том, что input пусто и если я нажимаю Enter, те же вызовы API делаются трижды.

Но функция должна быть такой, как если бы вы выбрали дату, тогда, не нажимая Enter, должен быть выполнен вызов API. Я не могу просто использовать функцию изменения, потому что, если набрано 2/3 и нажата Tab, она не будет автоматически корректировать дату, а также несколько вызовов API при нажатии Enter. Есть ли способ остановить несколько вызовов API?

(change)="startDate($event)" (keydown.enter)="CallAPI($event)"

    startDate(event) {
        if (event.target.value == '' || event.target.value == null)
            this.cutoverFilterApi(event)
    }
    CallAPI(event) {
        let data = event.target.value;
        if (data != '' && data != null && data != "NaN/NaN/NaN") {
            data = data;
        } else {
            data = "01/01/12";
        }
        this.httpService.getData('PATH' + data).subscribe((response: any) => {
            this.dateChangeData = response.results;
            this.rowData = response.results;
            this.gridApi.setRowData(this.rowData);
        });
    }

Answer 1

Вы можете оставить последнее действительное значение и избежать запроса, если оно одинаковое.

Примерно так:

lastDate = null; // <- variable to keep last value
CallAPI(event) {
    let data = event.target.value;
    if (data != '' && data != null && data != "NaN/NaN/NaN") {
        data = data;
    } else {
        data = "01/01/12";
    }
    // check if data is not the same as last request
    if (this.lastDate === data) {
        return;
    }
    this.lastDate = data; // <- update new request date
    this.httpService.getData('PATH' + data).subscribe((response: any) => {
        this.dateChangeData = response.results;
        this.rowData = response.results;
        this.gridApi.setRowData(this.rowData);
    });
}

Answer 2

Вы можете использовать это

(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)"

вместо

(change)="startDate($event)" (keydown.enter)="CallAPI($event)"

У меня есть пример angular выбора даты материала, который облегчит ваш код.

Ссылочная ссылка

Надеюсь, это полезно для вас. :)