属性绑定matHeaderRowDef未被嵌入式模板上的任何指令使用

Question

这是表格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导入到我的组件以及模块中.

Answer 1

我们有关于属性matHeaderRowDef和matRowDefColumns的问题完全相同.我们通过在单元测试规范文件中导入材料表模块(即 MatTableModule)来解决它.

具体来说,我们在初始声明中导入它,然后在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();
  });
});

希望这可以帮助 :)