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

【问题标题】：Property binding matHeaderRowDef not used by any directive on an embedded template嵌入式模板上的任何指令均未使用属性绑定 matHeaderRowDef
【发布时间】：2018-06-28 14:28:11
【问题描述】：

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

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

关于属性 matHeaderRowDef 和 matRowDefColumns，我们遇到了完全相同的问题。我们通过在单元测试 spec 文件中简单地导入材料表模块 i.e. 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();
  });
});

希望这会有所帮助:)

【讨论】：

这是一个比我正在做的更好的解决方案：我正在导入我的材料模块，这迫使我还包括动画模块
我的所有组件都有相同的问题。我试过这个解决方案，它不起作用

【解决方案2】：

导入 MatTableModule 会使错误停止，但如果您没有测试任何 MatTableModule 功能，则可以使用正确的模拟来解决此错误。

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

然后只需将 MatHeaderRowDef 放入您的 TestBed 声明中。重要的部分是inputs 属性。

【讨论】：

【解决方案3】：

将MatTableModule 导入规范文件有助于解决此问题

【讨论】：