Привязка свойства matHeaderRowDef не используется никакими директивами во встроенном шаблоне - PullRequest
Новая
       15

Привязка свойства matHeaderRowDef не используется никакими директивами во встроенном шаблоне

0 голосов
/ 28 июня 2018

Вот таблица html: 

<mat-table matSort class="inbox__messages" #table [dataSource]="dataSource">

<!-- Building Column -->
<ng-container matColumnDef="building">
  <mat-header-cell *matHeaderCellDef>
  <div class="inbox__messages__header">
    <h3 class="inbox__messages__header-label">Bâtiments</h3>
    <mat-form-field class="inbox__messages__dropdown">
      <mat-select placeholder="Choisir un bâtiment">
        <mat-option *ngFor="let building of buildings" [value]="building.value">
          {{ building.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  </mat-header-cell>
  <mat-cell *matCellDef="let element">
  <span class="inbox__messages__body-building">{{element.building}}</span>
</mat-cell>
</ng-container>

 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row" [class.expanded]="expandedElement == row"
(click)="expandedElement = row"></mat-row>

Эта ошибка возникает в тесте ng. Что мне не хватает? Я импортировал MatHeaderRowDef в свой компонент, а также в модуль.

Ответы [ 3 ]

0 голосов
/ 13 июня 2019

Импорт MatTableModule в файл спецификаций помогает в решении этой проблемы

0 голосов
/ 25 июня 2019

Импорт MatTableModule останавливает ошибку, но если вы не тестируете какие-либо функции MatTableModule, вы можете исправить эту ошибку с помощью правильного макета. 

@Directive({
  selector: '[matHeaderRowDef]',
  inputs: ['columns: matHeaderRowDef']
})
export class MatHeaderRowDef { }

А затем просто добавьте MatHeaderRowDef в ваши объявления TestBed. Важной частью является свойство inputs.

0 голосов
/ 09 июля 2018

У нас была точно такая же проблема, связанная со свойством matHeaderRowDef , а также matRowDefColumns . Мы решили это, просто импортировав модуль таблицы материалов, , т.е. MatTableModule , в файл модульного теста spec .

В частности, мы импортировали его в исходных объявлениях, а затем в блоке beforeEach .

Чтобы лучше уточнить, вот файл my-awesome.component.spec.ts : 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MyAwesomeComponent } from './my-awesome.component';
import { MatTableModule } from '@angular/material';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyAwesomeComponent ],
      imports: [ MatTableModule ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyAwesomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Надеюсь, это поможет:)

...