Angular material TypeError:fixture.debugElement.mat选项的查询为空

我是一个新的角度和测试它使用业力。我试图从模板中获取mat选项的实例，以验证其文本内容。不幸的是，我从因果报应那里得到了零错误

TypeError:optionDe在

以下是测试代码：

// When option is selected to [1], set selected to that:
  it(
    'Should select Shoes Order Type: International',
    () => {
      const de: DebugElement = fixture.debugElement;
      const optionDe = de.query(By.css('mat-option'));
      const p: HTMLElement = optionDe.nativeElement;
      expect(p.textContent).toEqual(''); 
    }
  );

以下是模板代码：

<mat-form-field>
    <mat-label>Order-Type:</mat-label>
    <mat-select>
        <mat-option
            *ngFor="let type of orderTypes"
            [value] = "type.name">
            {{ type.name }}
        </mat-option>
    </mat-select>
</mat-form-field>

订单类型：
{{type.name}}

问题:

---

如何正确获取该

mat选项的引用

或模板中的任何字段，以便我不会获得空指针异常并在测试中使用其属性？

当然是这样。您没有初始化共享代码中的任何数据。试试这样的

// When option is selected to [1], set selected to that:
it('Should select Shoes Order Type: International',
() => {
  // initialize the data in your component 
  fixture.component.orderTypes = [{name : 'opition1'}];
  const de: DebugElement = fixture.debugElement;
  const optionDe = de.query(By.css('mat-option'));
  const p: HTMLElement = optionDe.nativeElement;
  expect(p.textContent).toEqual(''); 
}
);

确保在“规格说明”部分中有一个模块

   TestBed.configureTestingModule({
      imports: [
        MatSelectModule,
        NoopAnimationsModule,
      ],
      declarations: declarations,
      providers: [
      ],
    }).compileComponents();

---

当然是。您没有初始化共享代码中的任何数据。试试这样的

// When option is selected to [1], set selected to that:
it('Should select Shoes Order Type: International',
() => {
  // initialize the data in your component 
  fixture.component.orderTypes = [{name : 'opition1'}];
  const de: DebugElement = fixture.debugElement;
  const optionDe = de.query(By.css('mat-option'));
  const p: HTMLElement = optionDe.nativeElement;
  expect(p.textContent).toEqual(''); 
}
);

确保在“规格说明”部分中有一个模块

   TestBed.configureTestingModule({
      imports: [
        MatSelectModule,
        NoopAnimationsModule,
      ],
      declarations: declarations,
      providers: [
      ],
    }).compileComponents();

---

我尝试按照您的建议模拟orderTypes[]中的值，但仍然返回相同的结果。我试图理解的是为什么

constoptionde=de.query（By.css（'mat-option'）抛出空异常。原因是我在By.css（{value}）中给出了错误的值吗？如果是这样，我如何获取mat选项模板的实例以获取其文本内容？
const p:HTMLElement=optionDe.nativeElement
基于您的错误，
optionDe
是空值，因为您没有任何包含“mat option”类的元素。我尝试将and标记交换到and标记，很明显，它起到了作用。我认为原因是这些标记依赖于我的组件。我认为您没有在每个文件之前将
MatSelectModule
包含在规范中。你能分享一下这个部分吗？@DragonKatol:u正在使用
fixture.detectChanges（）
我试着按照你的建议模拟orderTypes[]中的值，但仍然返回相同的结果。我试图理解的是为什么
constoptionde=de.query（By.css（'mat-option'）抛出空异常。原因是我在By.css（{value}）中给出了错误的值吗？如果是这样，我如何获取mat选项模板的实例以获取其文本内容？
const p:HTMLElement=optionDe.nativeElement
基于您的错误，
optionDe
是空值，因为您没有任何包含“mat option”类的元素。我尝试将and标记交换到and标记，很明显，它起到了作用。我认为原因是这些标记依赖于我的组件。我认为您没有在每个文件之前将
MatSelectModule
包含在规范中。你能分享一下吗？@DragonKatol:你正在使用
fixture.detectChanges（）