Angular Datatable: не удалось выполнить «removeChild» на «узле»: удаляемый узел не является дочерним для этого узла - PullRequest
Новая
       4

Angular Datatable: не удалось выполнить «removeChild» на «узле»: удаляемый узел не является дочерним для этого узла

0 голосов
/ 30 мая 2019

Я следую за сообщением здесь о том, как реализовать обработку server-side для Datatable.

Как видно из названия этого поста, я получаю следующую ошибку:

ОШИБКА DOMException: не удалось выполнить removeChild на узле: удаляемый узел не является дочерним узлом этого узла.

У меня такое ощущение, что я не устанавливаю свойство columns в dtOptions, как в посте. Я точно не хочу делать это таким образом, поскольку у меня есть какой-то пользовательский рендеринг, который я хотел бы сделать в своем html-шаблоне.

Вот мой код шаблона: 

<div class="card">
  <div class="card-body">
    <h5>Filter</h5>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <ng-container *ngIf="dataArray">
      <table datatable [dtOptions]="dtOptions" class="row-border hover">
        <thead>
          <tr>
            <th *ngFor="let columnSetting of columnSettings">
              {{ columnSetting.FriendlyName }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let model of dataArray">
            <td *ngFor="let setting of columnSettings">
              <div *ngIf="setting.IsString">
                {{ model[setting.PropertyName] }}
              </div>
              <div *ngIf="setting.IsBoolean">
                <!-- <fa name="check" animation="spin"></fa> -->
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </ng-container>
  </div>
</div>

Вот мой component.ts файл: 

export class DatatableComponent implements OnInit, AfterViewInit, OnDestroy {

  // @Input() modelObservable: Observable<any[]>;
  @Input() modelTypeName: string;
  @Input() showAddButton: boolean;
  @Input() serverUrl: string;

  dtTrigger: Subject<unknown> = new Subject();
  dtOptions: DataTables.Settings = {};
  columnSettings: IColumnSettings[];
  dataArray: any[] = [];

  constructor(private httpClient: HttpClient) { }

  ngOnInit(): void {
    this.loadDtOptions();
    this.loadColumnSettings();
  }

  ngAfterViewInit() {
    this.dtTrigger.next();
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

  private loadDtOptions(): void {
    const that = this;
    this.dtOptions = {
      pagingType: "full_numbers",
      pageLength: 25,
      serverSide: true, 
      processing: true,
      ajax: (searchParams: any, callback) => {
        that.httpClient.post<IListingResponse>(that.serverUrl, searchParams, {})
          .subscribe(resp => {
            console.log('resp', resp);
            that.dataArray = resp.Data;

            callback({
              recordsTotal: resp.TotalRecords,
              recordsFiltered: resp.FilteredRecords,
              data: []
            });
          });
      }
    }
  }

  private loadColumnSettings(): void {
    if (this.modelTypeName) {
      this.columnSettings = (<IColumnSettings[]>dataTableConfig[this.modelTypeName]).filter(x => x.IsVisible);
    }
  }
}

Как вы увидите, я заполняю columnSettings 1025 * следующим образом:

Вот мой IColumnSetting интерфейс: 

export interface IColumnSettings {
    IsPrimaryKey: boolean;
    PropertyName: string;
    FriendlyName: string;
    IsDate: boolean;
    IsString: boolean;
    IsBoolean: boolean;
    IsVisible: boolean;
}

Мой фактический dataTableConfig.ts в папке окружений: 

export const dataTableConfig = {
    person: [
        { IsPrimaryKey: true, PropertyName: 'id', FriendlyName: '#', IsString: true, IsDate: false, IsBoolean: false, IsVisible: true },
        { IsPrimaryKey: true, PropertyName: 'firstname', FriendlyName: 'FirstName', IsString: true, IsDate: false, IsBoolean: false, IsVisible: true },
        { IsPrimaryKey: true, PropertyName: 'Lastname', FriendlyName: 'LastName', IsString: true, IsDate: false, IsBoolean: false, IsVisible: true },
        { IsPrimaryKey: true, PropertyName: 'Username', FriendlyName: 'Username', IsString: true, IsDate: false, IsBoolean: false, IsVisible: true },
        { IsPrimaryKey: true, PropertyName: 'IsArchived', FriendlyName: 'Active', IsString: false, IsDate: false, IsBoolean: true, IsVisible: true }
    ],
}

Почему я получаю эту ошибку?

...