Мат-таблица не будет обновляться, пока я не введу ключ, который не «Enter» в моем окне поиска

Question

Я работаю над компонентом программы Angular 7 Electron, где я набираю ключевое слово в поле поиска, нажимаю Enter, и он получит 25 лучших видео для этого поиска из API YouTube.Как только я нажимаю Enter, данные извлекаются посредством вызова службы GET и с помощью лямбды, я перебираю результат и добавляю «имя» (название канала) в качестве объекта в массив с именем ELEMENT_DATA.Это используется в качестве источника данных для таблицы mat.

Если я ищу "test", он все это сделает, тогда ELEMENT_DATA будет содержать 25 объектов с {name: channelName}.На данный момент, он должен обновить мат-таблицу.Но вместо этого он обновляется только в том случае, если я наберу еще один символ, который не является «Enter».Он также очищает таблицу, потому что я назначаю ELEMENT_DATA пустому массиву каждый раз, когда нажимаю Enter.

Что я сделал не так, чтобы остановить обновление таблицы матов при нажатии Enter и почему оно обновляется только после ввода другого символав окно поиска?

Я удалил некоторые конфиденциальные данные, такие как ключи API и функции, из компонента, которые не имеют отношения к тому, чтобы сделать его немного понятнее.

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatInputModule, MatFormFieldModule, MatSort } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';
import { SearchService } from '../../services/search.service'

export interface PlaylistModel {
name: string;
}

@Component({
    selector: 'playlist-table',
    templateUrl: './playlist-table.component.html',
    styleUrls: ['./playlist-table.component.scss']
})

export class PlaylistTableComponent implements OnInit {
    displayedColumns: string[] = ['name'];
    ELEMENT_DATA: PlaylistModel[];
    dataSource = new MatTableDataSource(this.ELEMENT_DATA);
    searchTerm:string;

    constructor(private searchService: SearchService) { }

    ngOnInit() {
        this.ELEMENT_DATA = []
        this.dataSource.sort = this.sort;
    }

    @ViewChild(MatSort) sort: MatSort;

    searchForNew(event) {
        if (event.code == "Enter") {
            this.searchTerm = event.target.value;
            this.ELEMENT_DATA = []

            this.searchService.searchVideos(this.searchTerm)
                .subscribe(result => {
                    for (var i = 0; i < result.items.length; i++) {
                        this.ELEMENT_DATA.push({name: result.items[i].snippet.channelTitle})
                    }
                })
        }

        console.log(this.ELEMENT_DATA)
        this.dataSource = new MatTableDataSource(this.ELEMENT_DATA)

    }
}

<mat-form-field class="filter-input">
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

<div class="search-container">
    <mat-icon [style.opacity]="focusedSearch ? 0.8 : 0.4" >search</mat-icon>
    <mat-form-field class="search-input">
        <input id="searchInput" matInput (keyup)="searchForNew($event)" (focus)="searchFocus()" (blur)="searchUnfocus()">
    </mat-form-field>
</div>

<div class="table-container">
    <table mat-table [dataSource]="dataSource" class="data-table" matSort>

        <!-- Channel Name Column -->
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"
            (dblclick)="selectRow(row)"
            [style.background]="row == selectedRow ? 'rgba(255, 64, 129, 0.6)' : ''"></tr>
    </table>
</div>