2017-10-24 5 views
0

위쪽 : 공식 예제를 복제하는 방식으로 매트 확장 패널 구성 요소를 사용할 때 약간의 문제가 있습니다.확장 패널의 컨텍스트 오류

the documentation에 설명 된 기본 코드 블록으로 시작했습니다. 이것이 나오는 것은 꽤 직접 복사하여 붙여 넣기입니다. 그래서 파일이

video.component.html 같이

<mat-expansion-panel> 
<mat-expansion-panel-header> 
    This is the expansion title 
</mat-expansion-panel-header> 
<p>This is the primary content of the panel.</p> 
<mat-action-row> 
    <button mat-button>Click me</button> 
</mat-action-row> 

video.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { MatCardModule,MatExpansionModule } from '@angular/material'; 
import { VideoComponent } from './video.component'; 

@NgModule({ 
    declarations: [ 
    VideoComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    MatCardModule, 
    MatExpansionModule 
    ], 
    providers: [], 
    bootstrap: [VideoComponent] 
}) 
export class VideoModule { } 

video.components.ts

: 61 Firefox console log showing error and error context on MatExpansionPanel.html:1:61 을 그리고 또한 확장 패널 아무튼 16,
import { Component } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'video-root', 
    templateUrl: './video.component.html', 
    styleUrls: ['./video.component.css'] /* this is a blank file */ 
}) 
export class VideoComponent { 
    title = 'video'; 
    /* snipped */ 
    constructor(private http: Http) { } 
} 

../styles.css 페이지로드

@import "[email protected]/material/prebuilt-themes/indigo-pink.css"; 

, 나는 MatExpansionPanel.html을 가리키는 콘솔 오류를 받고 있어요 문서가 보여주는 것처럼 보이지 않거나 행동하지 않는 한 말입니다. Output of the page 표시되는 버튼은 아무렇지도 않습니다.

필자는 설명서를 주로 모방 한 방식으로 MatCard 모듈을 사용할 수 있었기 때문에 혼란 스럽습니다. 복사 한 코드와 video.component.ts의 가져 오기가 올바르게 작동하는 것입니다 즉, ngFor를 사용할 때 예상했던 것과 같이 동작합니다. 이것은 CSS를 가져 오는 방법에 문제가있는 냄새가 나지만 콘솔 오류가 발생하고 페이지의 다른 각도 요소가 실패하게됩니까?

답변

1

문제는 가져 오기 누락 인 것 같습니다. 내가 video.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 

을 추가 (그리고 @의 NgModule.imports에 BrowserAnimationsModule 추가)하면 모든 것이 제대로 작동했다. 나는 멍청이 또는 바보 같은 학생이라고 느끼지만 다른 사람이 같은 문제에 부딪 힐 경우 여기에 게시합니다.