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 ，我们遇到了完全相同的问题。我们只需在单元测试 spec 文件中导入物料表模块即 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();
  });
});

希望这会有所帮助：）

Answer 2

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

Answer 3

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

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

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

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

3 个答案: