Syncfusion Angular Grid -删除选定行

<ejs-grid [dataSource]="data" allowPaging="true" height="350px">
    <e-columns>
        <e-column field="id" headerText="ID" width="100"></e-column>
        <e-column field="name" headerText="Name" width="150"></e-column>
        <e-column field="age" headerText="Age" width="100"></e-column>
        <e-column field="designation" headerText="Designation" width="150"></e-column>
        <e-column field="salary" headerText="Salary" width="100"></e-column>
    </e-columns>
</ejs-grid>
<button (click)="deleteSelectedRow()">Delete Selected Row</button>

import { Component } from '@angular/core';

@Component({
    selector: 'app-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.css']
})
export class GridComponent {
    data: any[] = [
        { id: 1, name: 'John', age: 25, designation: 'Developer', salary: 5000 },
        { id: 2, name: 'Smith', age: 30, designation: 'Manager', salary: 7000 },
        { id: 3, name: 'David', age: 35, designation: 'Team Lead', salary: 8000 }
    ];

    deleteSelectedRow() {
        const selectedRecords = this.grid.getSelectedRecords();
        const selectedData = selectedRecords.map(record => record.data);
        
        for (const data of selectedData) {
            const index = this.data.indexOf(data);
            if (index > -1) {
                this.data.splice(index, 1);
            }
        }

        this.grid.dataSource = this.data;
    }
}