Как обновить представление таблицы при обновлении / удалении / вставке строки без перезагрузки всего компонента

Question

Я хочу обновить / удалить / вставить строку и обновить представление таблицы после нажатия кнопки отправки.В настоящее время мой component.ts перезагружает компонент после нажатия кнопки отправки.Кроме того, у меня есть только обновление функциональности на данный момент.Я добавлю удаление и обновление, как только эта проблема будет исправлена.

Пример component.ts:

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

import { MyApi } from './../my-api';
import { MyApiService } from './../my-api.service';

@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css'],
  providers: [MyApiService]
})
export class MyTableComponent implements OnInit {

    myApi: MyApi[];
    dataId: number;
    dataState: string;

    options = [
        { state: "MSG_ERROR" },
        { state: "MSG_WAIT_FA" },
        { state: "MSG_WAIT_BATCH" },
        { state: "MSG_COMPLETE" }
    ]

    constructor(
            private myApiService: MyApiService,
            private location: Location,
            private router: Router
        ) { }

    ngOnInit() {

        this.myApiService.getMyTables()
        .subscribe(myApi => this.myApi = myApi);
    }

    save(data): void {

        this.dataId = data.id;
        this.dataState = data.state;

        this.myApiService.updateMyTableState(this.dataId, this.dataState)
        .subscribe(() => this.goBack());
    }

    goBack(): void {

        this.router.navigateByUrl('', {skipLocationChange: true}).then(()=>
        this.router.navigate(["/home/my-api/my-table"]));
    }

}

Это мой component.html:

<app-header></app-header>
<app-menu></app-menu>
<app-settings></app-settings>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                      <h3 class="box-title">MSG WAIT FA</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table *ngIf="myApi" datatable class="table table-borderless table-hover">
                            <thead>
                                <tr>
                                    <th>Doctype</th>
                                    <th>Sender</th>
                                    <th>Receiver</th>
                                    <th>Count</th>
                                    <th>Created</th>
                                    <th>Resolution</th>
                                    <th>State</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let data of myApi">
                                    <td>{{ data.doctype_name }}</td>
                                    <td>{{ data.sender_name }}</td>
                                    <td>{{ data.receiver_name }}</td>
                                    <td>{{ data.count }}</td>
                                    <td>{{ data.created }}</td>
                                    <td>{{ data.resolution }}</td>
                                    <td align="center">
                                        <select [(ngModel)]="data.state">
                                            <option *ngFor="let o of options" [value]="o.state">{{ o.state }}</option>
                                        </select>
                                        <button class="btn btn-primary btn-sm" [disabled]="data.state == 'MSG_WAIT_FA'" (click)="save(data)"><i class="fa fa-save"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- / table -->
                    </div>
                    <!-- / box body -->
                </div>
                <!-- / box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>
<app-footer></app-footer>

Это мой service.ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

import { MyApi } from './my-api';

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class MyApiService {

  constructor(private http: HttpClient) { }

  private myApiUrl = 'http://path/to/my-api';

  getMyTable (): Observable<MyApi[]> {

    return this.http.get<MyApi[]>(this.myApiUrl + '/msg_wait_fa');
  }

  updateMyTableState(dataId: number, dataState: string): Observable<any> {

    return this.http.put(this.myApiUrl + '/msg_wait_fa/update/' + dataId + '/' + dataState, httpOptions);
  }
}

Проблема с моим кодом заключается в том, что при поиске определенной строки в окне поиска в DataTable и обновлении строки компонент перезагружается из своего исходного представленияне отображаются строки, определенные строкой в ​​окне поиска.Представьте, что в строке поиска есть много строк с той же строкой, которую вы указали.Каждый раз, когда я обновляю одну строку, компонент снова перезагружается, и я снова набираю строку в поле поиска, чтобы обновить другую строку.Я попытался подписаться на функцию ngOnInit(), когда строка обновляется, и она обновляет представление таблицы, не обновляя весь компонент.Проблема в том, что в окне поиска отображаются все записи, а не указанная строка.

Когда я обновляю строку, я хочу, чтобы и таблица обновлялась, но отображались только записи, соответствующие этой строке.окно поиска.

ОБНОВЛЕНИЕ: Я хочу, чтобы мое табличное представление было похоже на это, но все еще используя JQuery DataTable или Angular DataTable

https://github.com/marinantonio/angular-mat-table-crud