我对angular还是很陌生，我正在测试一个通过MAT_DIALOG_DATA注入数组并从每个元素打印一些信息的组件。但是，我遇到以下错误
错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/common/fesm5/common.js:3161:1)
at checkAndUpdateDirectiveInline (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:18540:1)
at checkAndUpdateNodeInline (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:19801:1)
at checkAndUpdateNode (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:19763:1)
at debugCheckAndUpdateNode (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:20397:1)
at debugCheckDirectivesFn (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:20357:1)
at Object.eval [as updateDirectives] (ng:///DynamicTestModule/TechniqueDetailsComponent.ngfactory.js:246:5)
at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:20349:1)
at checkAndUpdateView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:19745:1)
at callViewAction (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:19986:1)
该组件正常工作，但是测试失败。在这种情况下，我需要提供实际的测试数据以通过测试吗？如果是这样，我该怎么办？
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TechniqueDetailsComponent } from './technique-details.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';
describe('TechniqueDetailsComponent', () => {
let component: TechniqueDetailsComponent;
let fixture: ComponentFixture<TechniqueDetailsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TechniqueDetailsComponent ],
providers: [ { provide: MAT_DIALOG_DATA, useValue: {} } ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TechniqueDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
component.ts
import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-technique-details',
templateUrl: './technique-details.component.html',
styleUrls: ['./technique-details.component.scss']
})
export class TechniqueDetailsComponent implements OnInit {
constructor(
@Inject(MAT_DIALOG_DATA) public data: any
) { }
ngOnInit() {
}
}
编辑：
component.html
<section class="mat-typography">
<h1 mat-dialog-title class="mat-h1">Technique(s)</h1>
<div mat-dialog-content>
<mat-tab-group>
<ng-container *ngFor="let item of data">
<mat-tab label="{{item.name}}">
<mat-card class="example-card" >
<mat-card-header>
<mat-card-subtitle class="mat-body-2">{{item.description}}<br/></mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<mat-divider></mat-divider>
<br/><mat-label><b>Structure:</b></mat-label><br/>
<mat-tab-group>
<ng-container *ngFor="let mod of item.structure.modules">
<mat-tab label="{{mod.name}}">
<mat-tab-group>
<ng-container *ngFor="let pha of mod.phases">
<mat-tab label="{{pha.name}}">
<ng-container *ngFor="let tsk of pha.tasks">
<br/>{{tsk.type}}
<br/>{{tsk.description}}
<br/>{{tsk.role}}
<br/>{{tsk.resources}}
</ng-container>
</mat-tab>
</ng-container>
</mat-tab-group>
</mat-tab>
</ng-container>
</mat-tab-group>
<br/><mat-label><b>Rules:</b></mat-label>
<ng-container *ngFor="let i of item.rules">
{{i}}<br/>
</ng-container>
<mat-label><b>Target Audience:</b></mat-label>
<ng-container *ngFor="let i of item.target_audience">
{{i}}<br/>
</ng-container>
<mat-label><b>Resolution Scope:</b></mat-label>
<ng-container *ngFor="let i of item.resolution_scope">
{{i}}<br/>
</ng-container>
<mat-label><b>Delivery Mode:</b></mat-label>
<ng-container *ngFor="let i of item.delivery_mode">
{{i}}<br/>
</ng-container>
<mat-label><b>Interaction:</b></mat-label>
<ng-container *ngFor="let i of item.interaction">
{{i}}<br/>
</ng-container>
<mat-list>
<mat-label><b>Learning Objectives:</b></mat-label><br/>
<mat-list-item *ngFor="let lo of item.learning_objectives">
{{lo.knowledge_category}} => {{lo.behaviour}}
</mat-list-item>
</mat-list>
<ng-container *ngIf="item.affective_objectives.length > 0">
<mat-list>
<mat-label><b>Affective Objectives:</b></mat-label><br/>
<mat-list-item *ngFor="let i of item.affective_objectives">
{{i}}
</mat-list-item>
</mat-list>
</ng-container>
<ng-container *ngIf="item.social_objectives.length > 0">
<mat-list>
<mat-label><b>Social Objectives:</b></mat-label><br/>
<mat-list-item *ngFor="let i of item.social_objectives">
{{i}}
</mat-list-item>
</mat-list>
</ng-container>
</mat-card-content>
</mat-card>
</mat-tab>
</ng-container>
</mat-tab-group>
</div>
</section>
答案 0 :(得分：0)
ngFor不适用于对象文字
行
<ng-container *ngFor="let item of data">
在component.html中说：“获取名为数据的集合，并为该集合的每个成员创建一个元素。但是，测试文件中的行
providers: [ { provide: MAT_DIALOG_DATA, useValue: {} } ],
您将数据设置为对象{}。将行更改为使用空数组，您的错误应该消失了：
providers: [ { provide: MAT_DIALOG_DATA, useValue: [] } ],