錯誤：角度2材料

夥計們我是新角度2材料獲取錯誤，如圖所示。我嘗試了很多選擇，提到了許多類似的問題，但沒有爲我工作。請幫我解決這個問題。錯誤：角度2材料

我正在嘗試角度材料的滑動切換。我添加了一些庫，例如材料，動漫，錘子，但仍然得到錯誤

/* 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>

來源

2017-09-20 Angular2_Begineer

也許嘗試導入'ReactiveFormsModule'而不是？ – Edric

不，它沒有工作 –

你能告訴我們你的角度和角度的材料版本嗎？ – Edric

希望它會工作。只是刪除

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

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

這是因爲ngModel不是MD-無線電組或MD-複選框的屬性。

來源

2017-10-01 10:12:36

錯誤：角度2材料

回答

相關問題