Context Fehler mit Erweiterungskarten

Question

Vorne: Ich habe einige Probleme mit der Verwendung der Matte-Erweiterung Panel-Komponente in einer Weise, die die offiziellen Beispiele repliziert.

Ich begann mit dem grundlegenden Codeblock wie in the documentation beschrieben. Was dabei herauskommt, ist ziemlich direktes Kopieren und Einfügen; so dass die Dateien aussehen

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

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 "~@angular/material/prebuilt-themes/indigo-pink.css"; 

Auf Seite zu laden, ich bin eine Konsole Störung zu erhalten, die auf MatExpansionPanel.html Punkte: 1: 61 Und dann auch die Expansion Panel doesn 't ~ work ~ insofern es nicht so aussieht oder sich so verhält, wie die Dokumentation zeigt. Der Knopf, den Sie sehen, tut übrigens nichts.

Ich bin verwirrt, weil ich nur das MatCard-Modul in einer Weise verwenden konnte, die weitgehend die Dokumentation nachahmte - der kopierte Code, zusammen mit dem Import in video.component.ts, machte Dinge, die sich richtig verhielten (also benahm sich wie ich es erwartet habe als ich ngFor benutzt habe). Das riecht nach einem Problem mit der Art, wie ich das CSS einbringe, aber würde das einen Konsolenfehler verursachen und dazu führen, dass andere eckige Elemente auf der Seite ausfallen?

Answer 1

Das Problem scheint ein fehlender Import gewesen zu sein. Sobald ich

hinzugefügt

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

zu video.module.ts (und hinzugefügt BrowserAnimationsModule den @ NgModule.imports), funktionierte alles einwandfrei. Ich fühle mich wie ein Idiot oder der Schüler eines Idioten, aber posten das hier für den Fall, dass jemand anderes das gleiche Problem hat.