Привязка к свойству Handsontable height вызывает ExpressionChangedAfterItHasBeenCheckedError в тестах - PullRequest
Новая
       6

Привязка к свойству Handsontable height вызывает ExpressionChangedAfterItHasBeenCheckedError в тестах

0 голосов
/ 30 января 2019

Мне нужно динамически изменять высоту моей handsontable в моем угловом компоненте, но при этом выдается ошибка ExpressionChangedAfterItHasBeenCheckedError, когда я запускаю свои модульные тесты.Как я могу установить высоту, не получая эту ошибку?

Я использую угловой 6 и жасмин.Мне нужно, чтобы высота handsontable была оценена динамически, потому что я динамически добавляю и удаляю компоненты из своего родительского компонента.Я не получаю сообщение об ошибке для свойства ширины, хотя я оцениваю его таким же образом. 

 <div>
  <hot-table
    hotId="searchResultsTableId"
    [width]="getTableWidth()"
    [height]="getTableHeight()"
    [data]="data"
  >
  </hot-table>
 </div>

И в файле машинописи моего компонента: 

getTableHeight(): number {
  const style = window.getComputedStyle(this.element, 'height')
  const containerHeight = Number(style['height'].split('p')[0])
  return containerHeight - 120
}
getTableWidth(): number {
  const style = window.getComputedStyle(this.element, 'width')
  const containerWidth = Number(style['width'].split('p')[0])
  return containerWidth - 50
}

Мой файл спецификаций выглядит так: 

describe('SearchResultsComponent', () => {
  let component: SearchResultsComponent
  let fixture: ComponentFixture<SearchResultsComponent>

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [SearchResultsComponent],
      imports: [
        HotTableModule.forRoot(),
      ],
      providers: [
        { provide: SearchService, useClass: MockSearchService },
      ]
    }).compileComponents()
    fixture = TestBed.createComponent(SearchResultsComponent)
    component = fixture.debugElement.componentInstance
    fixture.detectChanges()
  })
  describe('processResults', () => {
    it('should pass the test', () => {
      expect(true).toEqual(true)
    })
  })
})

Я получаю сообщение об ошибке "Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после того, как оно было проверено. Предыдущее значение:" высота: -101 ". Текущее значение:" высота: -43.734399999999994 "" во время работы моегоtest, и это появилось только после привязки к свойству height следующим образом.Я ожидаю, что тест пройдет без этой ошибки.

1 Ответ

0 голосов
/ 30 января 2019

Попробуйте что-то вроде этого: 

<div>
  <hot-table
    hotId="searchResultsTableId"
    [width]="tableWidth"
    [height]="tableHeight"
    [data]="data"
  >
  </hot-table>
 </div>

А в файле машинописи вашего компонента: 

tableHeight: Number;
tableWidth: Number;

ngAfterViewInit() {
  this.computeTableHeight();
  this.computeTableWidth();
}

computeTableHeight(): number {
  const style = window.getComputedStyle(this.element, 'height');
  const containerHeight = Number(style['height'].split('p')[0]);
  this.tableHeight = containerHeight - 120;
}
computeTableWidth(): number {
  const style = window.getComputedStyle(this.element, 'width');
  const containerWidth = Number(style['width'].split('p')[0]);
  this.tableWidth = containerWidth - 50;
}

Объяснение: Angular не позволяет свойству изменяться на этапе рендеринга, потому что оновызовет своего рода циклическую зависимость:

  • Angular отображает страницу, затем проверяет динамические значения
  • Динамическое значение зависит от отображаемой страницы

Интерфейс AfterViewInit позволяет выполнять код в определенном хуке жизненного цикла, предназначенном для таких случаев использования.

...