角度错误TypeError：无法读取未定义的属性'_detailsS​​how'

Question

我在将响应元素设置为true时遇到角度数据表问题。 在下面的特定情况下，我得到以下错误。

没有错误时： When no errors

服务器一次返回空行后的错误： Errors after the server returns empty rows once

初始化页面并且默认过滤器包含行时，响应式展开按钮可以正常工作。但是，当进行自定义搜索时不返回任何行，然后发生另一次返回行的搜索，则丢失扩展事件，并且出现上述错误。我确信这与销毁数据表实例并使用来自服务器的新数据重新初始化它有关。

已包装的产品：

    "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "angular-datatables": "^7.0.0",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "datatables.net": "^1.10.19",
    "datatables.net-dt": "^1.10.19",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "metismenu": "^3.0.3",
    "moment": "^2.22.2",
    "ng-block-ui": "^2.0.0",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  }

代码：

import {
  Component,
  OnInit,
  OnDestroy,
  ViewChild
} from '@angular/core';
import {
  LogsService
} from './logs.service';
import {
  Log
} from './log';
import {
  GlobalService
} from '../shared/global.service';
import {
  FormGroup,
  FormBuilder
} from '@angular/forms';
import {
  DataTableDirective
} from 'angular-datatables';
import {
  Subject
} from 'rxjs';
import {
  Filter
} from '../shared/filter';
import {
  BlockUI,
  NgBlockUI
} from 'ng-block-ui';
declare
var $: any;

@Component({
  selector: 'app-logs',
  templateUrl: './logs.component.html',
  styleUrls: ['./logs.component.css']
})

export class LogsComponent implements OnDestroy, OnInit {
  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;
  dtOptions: any = {};
  dtTrigger: Subject < LogsComponent > = new Subject();
  currentLogs: Log[];
  elements: any;
  filterForm: FormGroup;
  filter: Filter;
  @BlockUI() blockUI: NgBlockUI;

  constructor(private logService: LogsService, private globalService: GlobalService, private fb: FormBuilder) {}

  ngOnInit() {
    this.currentLogs = [];
    this.dtOptions = {
      retrieve: true,
      responsive: true,
      dom: '<l>Bfrtip',
      buttons: [
        'copy', 'csv', 'excel', {
          extend: 'pdfHtml5',
          orientation: 'landscape',
          pageSize: 'TABLOID'
        },
        {
          extend: 'print',
          orientation: 'landscape',
          pageSize: 'TABLOID',
          paperSize: 'TABLOID',
          customize: function(win) {
            $(win.document.body)
              .css('font-size', '10pt');
            $(win.document.body).find('table')
              .addClass('compact')
              .css('font-size', 'inherit');
          }
        }
      ]
    };

    this.filterForm = this.fb.group({
      customer: ['ALL'],
      division: ['ALL'],
      eventCode: ['ALL'],
      statusCode: ['ALL'],
      source: ['ALL'],
      destination: ['ALL'],
      logStart: [''],
      logEnd: ['']
    });

    this.globalService.getUiElementObject(true).subscribe(el => {
      console.log(el);
      this.elements = el;
      this.filterForm = this.fb.group({
        customer: ['ALL'],
        division: ['ALL'],
        eventCode: ['ALL'],
        statusCode: 'All',
        source: ['ALL'],
        destination: ['ALL'],
        logStart: [this.elements.logStart],
        logEnd: [this.elements.logEnd],
      });

      this.applyFilter(false);
    }, error => console.log(error));
  }

  ngAfterViewChecked() {
    this.reloadUIFeatures();
  }

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

  applyFilter(datecheck) {
    this.blockUI.start();

    if (datecheck) {
      this.filterForm.patchValue({
        logStart: $("#dtStartDate").val(),
        logEnd: $("#dtEndDate").val()
      });
    }

    const fil = { ...this.filter,
      ...this.filterForm.value
    };
    this.logService.getLogs(fil).subscribe(logs => {
      var previousCount = 0;
      var currentCount = 0;

      if (this.currentLogs) {
        previousCount = this.currentLogs.length;
      }

      this.currentLogs = logs;
      this.reloadUIFeatures();
      currentCount = this.currentLogs.length;

      if (this.dtElement.dtInstance) {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
          dtInstance.destroy(); // 1) Suspected error zone
        });
      }

      this.dtTrigger.next(); // 2) Suspected error zone

      setTimeout(() => {
        this.blockUI.stop();
      }, 2000);
    }, error => console.log(error));
  }

  reloadUIFeatures() {
    var dtStDt = $("#dtStartDate").datepicker({
      dateFormat: 'yy-mm-dd'
    });
    var dtEdDt = $("#dtEndDate").datepicker({
      dateFormat: 'yy-mm-dd'
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-wrapper">
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">Event Logs</h1>
    </div>
    <!-- /.col-lg-12 -->
  </div>
  <!-- /.row -->
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <form novalidate autocomplete="off" (ngSubmit)="applyFilter(true)" [formGroup]="filterForm" class="panel-heading">
          <div class="panel-heading">
            <h4>Filter by</h4>
            <div>
              <div class="">
                <div class="row">
                  <div class="col-xs-3">
                    <div class="form-group">
                      <label class="control-label" attr.for="lstCustomer">Customer</label>
                      <div>
                        <select class="form-control" id="lstCustomer" *ngIf="elements" formControlName="customer">
                          <option *ngFor='let cu of elements.customerList' value="{{ cu.key }}">{{ cu.value }}</option>
                        </select>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="control-label" attr.for="lstSource">Source</label>
                      <div>
                        <select class="form-control" id="lstSource" *ngIf="elements" formControlName="source">
                          <option *ngFor='let cu of elements.sourceList' value="{{ cu.key }}">{{ cu.value }}</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-3">
                    <div style="">
                      <div class="form-group">
                        <label class="control-label" attr.for="lstDivisionNo">Division</label>
                        <div>
                          <select class="form-control" id="lstDivisionNo" *ngIf="elements" formControlName="division">
                            <option *ngFor='let cu of elements.opcoList' value="{{ cu.key }}">{{ cu.value }}</option>
                          </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label" attr.for="lstDestination">Destination</label>
                        <div>
                          <select class="form-control" id="lstDestination" *ngIf="elements" formControlName="destination">
                            <option *ngFor='let cu of elements.destinationList' value="{{ cu.key }}">{{ cu.value }}</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-3">
                    <div style="">
                      <div class="form-group">
                        <label class="control-label" attr.for="lstEventCode">Event Code</label>
                        <div>
                          <select class="form-control" id="lstEventCode" *ngIf="elements" formControlName="eventCode">
                            <option *ngFor='let cu of elements.eventCodeList' value="{{ cu.key }}">{{ cu.value }}</option>
                          </select>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label" attr.for="dtStartDate">Log Date</label>
                        <div class="row">
                          <div class="col-xs-6">
                            <input class="form-control" style="" type="text" id="dtStartDate" formControlName="logStart">
                          </div>
                          <div class="col-xs-6">
                            <input class="form-control" style="" type="text" id="dtEndDate" formControlName="logEnd">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-3">
                    <div style="">
                      <div class="form-group">
                        <label class="control-label" attr.for="lstStatusCode">Status Code</label>
                        <div>
                          <select class="form-control" id="lstStatusCode" *ngIf="elements" formControlName="statusCode">
                            <option *ngFor='let cu of elements.statusCodeList' value="{{ cu }}">{{ cu }}</option>
                          </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label" attr.for="lstStatusCode">&nbsp;</label>
                        <button type="submit" class="btn btn-outline btn-primary form-control">Apply</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
        <!-- /.panel-heading -->
        <div class="panel-body">
          <block-ui>
            <div class="table-responsive">
              <table width="100%" class="table table-striped table-bordered table-hover" id="dtEventLogs" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
                <thead>
                  <tr>
                    <th>Id</th>
                    <th>Customer</th>
                    <th class="minWidth-s4">Log Entry Date</th>
                    <th>Status Table</th>
                    <th>Status Key</th>
                    <th>Status Code</th>
                    <th class="minWidth-s4">Attempt Made At</th>
                    <th>Applied?</th>
                    <th class="minWidth-s4">Last Updated</th>
                    <th>User</th>
                    <th class="minWidth-s1">Cntr No</th>
                    <th>Event Code</th>
                    <th>Division</th>
                    <th>Status Field</th>
                    <th>Update Table</th>
                    <th>Update Field</th>
                    <th>Update Field Type</th>
                    <th>Update Value</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="even gradeA" *ngFor='let log of currentLogs'>
                    <td class="details-control">{{log.id}}</td>
                    <td>{{log.customerNo}}</td>
                    <td class="minWidth-s4">{{log.logEntryDate | date:'medium'}}</td>
                    <td>{{log.statusTableName}}</td>
                    <td>{{log.statusTableId}}</td>
                    <td>{{log.statusCode}}</td>
                    <td class="minWidth-s4">{{log.attemptedUpdateDate | date:'medium'}}</td>
                    <td>{{log.apply}}</td>
                    <td class="minWidth-s4">{{log.lastUpdated | date:'medium'}}</td>
                    <td>{{log.updatedBy}}</td>
                    <td class="minWidth-s1">{{log.containerNumber}}</td>
                    <td>{{log.eventCode}}</td>
                    <td>{{log.divisionNumber}}</td>
                    <td>{{log.statusFieldName}}</td>
                    <td>{{log.updateTableName}}</td>
                    <td>{{log.updateFieldName}}</td>
                    <td>{{log.updateFieldType}}</td>
                    <td>{{log.updateFieldValue}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </block-ui>
          <!-- /.table-responsive -->
        </div>
        <!-- /.panel-body -->
      </div>
      <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
  </div>
  <!-- /.row -->
</div>

非常感谢您的帮助。这肯定是男生在以角度方式初始化/销毁/重新创建数据表实例时出现的错误。

此致

Ram