Fehler: Angular 2 Material

Question

Jungs Ich bin neu in Winkel 2 Material Fehler wie in Bild gezeigt. Ich habe viele Möglichkeiten ausprobiert, viele ähnliche Fragen gestellt, aber nichts hat für mich funktioniert. Bitte helfen Sie mir, dieses Problem zu lösen.

Ich versuche Gleit-Toggle von eckigem Material. Ich habe hinzugefügt Bibliotheken wie Material, Animation, Hammer, aber immer noch Fehler immer

enter image description here

/* App Module */ 
 

 
import { NgModule } from '@angular/core'; 
 
import { BrowserModule } from '@angular/platform-browser'; 
 
import { FormsModule } from '@angular/forms'; 
 

 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
 
import {MdButtonModule, MdCheckboxModule, MdCardModule, MdSlideToggleModule, MdTabsModule, MdExpansionModule, MdDialogModule, MdTooltipModule} from '@angular/material'; 
 

 
import { AppComponent } from './app.component'; 
 

 
@NgModule({ 
 
    declarations: [ 
 
    AppComponent 
 
    ], 
 
    imports: [ 
 
    BrowserModule, 
 
    FormsModule, 
 
    BrowserAnimationsModule, 
 
    MdButtonModule, 
 
    MdCheckboxModule, 
 
    MdCardModule, 
 
    MdTabsModule, 
 
    MdExpansionModule, 
 
    MdDialogModule, 
 
    MdTooltipModule, 
 
    MdSlideToggleModule 
 
    ], 
 
    providers: [], 
 
    bootstrap: [AppComponent] 
 
}) 
 
export class AppModule { } 
 

 

 

 
/* App component */ 
 

 
import { Component } from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'app-root', 
 
    templateUrl: './app.component.html', 
 
    styleUrls: ['./app.component.css'] 
 
}) 
 
export class AppComponent { 
 
    title = 'app'; 
 
    color = 'accent'; 
 
    checked = false; 
 
    disabled = false; 
 
} 
 

 
/* main.ts */ 
 

 
import { enableProdMode } from '@angular/core'; 
 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
 

 
import { AppModule } from './app/app.module'; 
 
import { environment } from './environments/environment'; 
 
import 'hammerjs'; 
 

 
if (environment.production) { 
 
    enableProdMode(); 
 
} 
 

 
platformBrowserDynamic().bootstrapModule(AppModule);

.example-card { 
 
    width: 200px; 
 
} 
 

 
.example-header-image { 
 
    background-image: url('https://material.angular.io/assets/img/examples/shiba2.jpg'); 
 
    background-size: cover; 
 
} 
 

 
.example-h2 { 
 
    margin: 10px; 
 
} 
 

 
.example-section { 
 
    display: flex; 
 
    align-content: center; 
 
    align-items: center; 
 
    height: 60px; 
 
} 
 

 
.example-margin { 
 
    margin: 0 10px; 
 
}

<md-card> 
 
    <md-card-content> 
 
    <h2 class="example-h2">Slider configuration</h2> 
 

 
    <section class="example-section"> 
 
     <label class="example-margin">Color:</label> 
 
     <md-radio-group [(ngModel)]="color"> 
 
     <md-radio-button class="example-margin" value="primary"> 
 
      Primary 
 
     </md-radio-button> 
 
     <md-radio-button class="example-margin" value="accent"> 
 
      Accent 
 
     </md-radio-button> 
 
     <md-radio-button class="example-margin" value="warn"> 
 
      Warn 
 
     </md-radio-button> 
 
     </md-radio-group> 
 
    </section> 
 

 
    <section class="example-section"> 
 
     <md-checkbox class="example-margin" [(ngModel)]="checked">Checked</md-checkbox> 
 
    </section> 
 

 
    <section class="example-section"> 
 
     <md-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</md-checkbox> 
 
    </section> 
 
    </md-card-content> 
 
</md-card> 
 

 
<md-card class="result"> 
 
    <md-card-content> 
 
    <h2 class="example-h2">Result</h2> 
 

 
    <section class="example-section"> 
 
     <md-slide-toggle 
 
      class="example-margin" 
 
      [color]="color" 
 
      [checked]="checked" 
 
      [disabled]="disabled"> 
 
     Slide me! 
 
     </md-slide-toggle> 
 
    </section> 
 
    </md-card-content> 
 
</md-card>

Answer 1

es hoffen, wird funktionieren. Entfernen Sie einfach

[(ngModel)]="color" 
[(ngModel)]="checked" 
[(ngModel)]="disabled" 

[color]="color" 
[checked]="checked" 
[disabled]="disabled" 

Dies liegt daran, ngModel keine Eigenschaft von md-radio-Gruppe oder md-Checkbox ist.