Angular DataTable (сетка) не привязана к данным Json

Question

Я использую angular datatable для отображения сетки в моей форме.

Я могу связать сетку со stati c data в компоненте. T

Однако, когда я пытаюсь связать данные из вызова API, сетка не отображается .

Хотя мой API возвращает данные точно так же, как мои данные c. У меня всего 1 неделя опыта в Angular, поэтому я надеюсь, что кто-нибудь поможет мне выяснить, что не так с моим кодом.

это мой html

 <div style="overflow-x:scroll; overflow-y:hidden; margin-bottom: 18px;">
    <table datatable [dtOptions]="dtOptions" class="row-border hover grid"></table>
  </div>

Это мои данные c, к которым привязывается сетка.

dtUsers = [{"ProjectId":1,"Name":"SomeName","ProjectWaveId":0,"ProjectWave":"Unknown","ProjectServiceLineID":0,"ServiceLine":"Unknown or Undefined","MasterAccountID":"UNKNOWN","ClientID":0,"ClientName":"SomeClient","SeasonYear":0.0,"ImplementationContact":"UNKNOWN","CreatedBy":-1,"CreatedDt":"1900-01-01T00:00:00","ModifiedBy":-1,"ModifiedDt":"2019-03-22T15:55:26.413"}];

И это данные, возвращаемые из API

"[{"ProjectId":1,"Name":"SomeName","ProjectWaveId":0,"ProjectWave":"Unknown or Undefined","ProjectServiceLineID":0,"ServiceLine":"Unknown or Undefined","MasterAccountID":"UNKNOWN","ClientID":0,"ClientName":"SomeClient","SeasonYear":0.0,"ImplementationContact":"UNKNOWN","CreatedBy":-1,"CreatedDt":"1900-01-01T00:00:00","ModifiedBy":-1,"ModifiedDt":"2019-03-22T15:55:26.413"}]"

Это часть кода в component.ts

export class SearchProjectComponent implements OnInit, OnDestroy {
  dtUsers: any[];
  ngOnInit() {
    this.dtOptions = {
      data: this.dtUsers,
      columns: [{
          title: 'Project ID',
          data: 'ProjectId'
        },
        {
          title: 'Project Name',
          data: 'Name'
        },
        {
          title: 'Project Wave',
          data: 'ProjectWave'
        },
        {
          title: 'Service Line',
          data: 'ServiceLine'
        },
        {
          title: 'Master Account',
          data: 'MasterAccountID'
        },
        {
          title: 'Client',
          data: 'ClientName'
        },
        {
          title: 'Season Year',
          data: 'SeasonYear'
        },
        {
          title: 'Implementation contact',
          data: 'ImplementationContact'
        },
        {
          title: 'Modified By',
          data: 'ModifiedBy'
        },
        {
          title: 'Created By',
          data: 'CreatedBy'
        },
        {
          title: 'Modified Date',
          data: 'ModifiedDt'
        },
        {
          title: 'Created Date',
          data: 'CreatedDt'
        },
        {
          title: 'Action',
          data: null,
          defaultContent: `
            <button class="link-button">Edit</button>`
        }
      ]
    };
  }
  onSubmit() {
    debugger;
    console.log(1);
    this.searchservice.searchProjects(this.selectedFilters).subscribe(res => this.bindDataTable(res));
    this.dtTrigger.next();
  }

  bindDataTable(dt) {
    debugger;
    console.log(2);
    this.dtUsers = dt;
    this.dtOptions = {
      data: this.dtUsers,
      columns: [{
          title: 'Project ID',
          data: 'ProjectId'
        },
        {
          title: 'Project Name',
          data: 'Name'
        },
        {
          title: 'Project Wave',
          data: 'ProjectWave'
        },
        {
          title: 'Service Line',
          data: 'ServiceLine'
        },
        {
          title: 'Master Account',
          data: 'MasterAccountID'
        },
        {
          title: 'Client',
          data: 'ClientName'
        },
        {
          title: 'Season Year',
          data: 'SeasonYear'
        },
        {
          title: 'Implementation contact',
          data: 'ImplementationContact'
        },
        {
          title: 'Modified By',
          data: 'ModifiedBy'
        },
        {
          title: 'Created By',
          data: 'CreatedBy'
        },
        {
          title: 'Modified Date',
          data: 'ModifiedDt'
        },
        {
          title: 'Created Date',
          data: 'CreatedDt'
        },
        {
          title: 'Action',
          data: null,
          defaultContent: `
            <button class="link-button">Edit</button>`
        }
      ]
    };
  }
  ngOnDestroy() {
    this.dtTrigger.unsubscribe();
  }
}