无法绑定属性,因为它不是组件的已知属性

时间:2019-09-25 12:51:37

标签: angular jasmine

在使用茉莉花和业力进行以下角度测试时出现错误。我嘲笑了MessageViewerComponent组件。但是,我仍然收到以下错误。我不确定原因为何?如果您在规格文件中注意到,则说明我正在使用MockMessageViewerComponent,但似乎并没有使用它。

Failed: Template parse errors:
Can't bind to 'messageViewer' since it isn't a known property of 'app-message-viewer'.
1. If 'app-message-viewer' is an Angular component and it has 'messageViewer' input, then verify that it is part of this module.
2. If 'app-message-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("werModel.messages.length > 0" style="padding-left: 10px;">
                    <app-message-viewer [ERROR ->][messageViewer]="messageViewerModel"></app-message-viewer>
                </div>

"): ng:///DynamicTestModule/StatementsComponent.html@20:40
'app-message-viewer' is not a known element:
1. If 'app-message-viewer' is an Angular component, then verify that it is part of this module.
2. If 'app-message-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("iv *ngIf="messageViewerModel.messages.length > 0" style="padding-left: 10px;">
                    [ERROR ->]<app-message-viewer [messageViewer]="messageViewerModel"></app-message-viewer>
                </div"): ng:///DynamicTestModule/StatementsComponent.html@20:20

Statementcomponent html

<div *ngIf="messageViewerModel.messages.length > 0" style="padding-left: 10px;">
                <app-message-viewer [messageViewer]="messageViewerModel"></app-message-viewer>
</div>

MessageViewerComponent

import { Component, OnInit, Input } from '@angular/core';
import { MessageViewerModel } from '../../../models/message.viewer.model';

@Component({
  selector: 'app-message-viewer',
  templateUrl: './message-viewer.component.html',
  styleUrls: ['./message-viewer.component.css']
})
export class MessageViewerComponent implements OnInit {
    @Input()
    messageViewer: MessageViewerModel;

  constructor() { }

  ngOnInit() {
  }

}

statements.component.spec文件

class MockMessageViewerModel {
    title: string;
    messages: string[];
   }

  @Component({
    selector: 'app-message-viewer',
    template: ''
  })
  class MockMessageViewerComponent {
    @Input()
    messageViewer: MockMessageViewerModel;    
  }


describe('StatementsComponent', () => {
    let component: StatementsComponent;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientModule,
                RouterTestingModule,
                FormsModule,
                TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,
                        useClass: TranslateLanguageLoader
                    }
                })
            ],
            declarations: [
                MockMessageViewerComponent,
                StatementsComponent,
                StatementTradeComponent,
                StatementPaymentInComponent,
                StatementPaymentOutComponent,
                ModalDirective

            ],
            providers: [
                AuthService,
                AlertService,
                StatementsService,
                ConfigurationService,
                LocalStoreManager,
                AppTitleService,
                AppTranslationService,
                NotificationService,
                NotificationEndpoint,
                EndpointFactory,
                StatementsEndpoint,
                TradeService,
                TradeEndpoint,
                SettlementService,
                SettlementEndpoint
            ],
            // ],
            // schemas: [NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA]
            schemas:      [ NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA ]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        component = new StatementsComponent(null, null, null, null);
    });

    it('should be created', () => {
        expect(component).toBeTruthy();
    });
});

0 个答案:

没有答案