Angular2：切換按鈕無法正常工作

我想在md-list中顯示Material 2切換按鈕。不知道他們爲什麼會出現單選按鈕。Angular2：切換按鈕無法正常工作

<md-list> 
    <md-button-toggle-group #group="mdButtonToggleGroup"> 
    <md-list-item><md-button-toggle>First Button</md-button-toggle></md-list-item> 
    <md-list-item><md-button-toggle>Second Button</md-button-toggle></md-list-item> 
    </md-button-toggle-group> 
</md-list>

app.module.ts

import {MaterialModule} from "@angular/material"; 
import 'hammerjs'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    CommonModule, 
    FormsModule, 
    HttpModule, 
    MaterialModule 
    ], 
    providers: [__platform_browser_private__.BROWSER_SANITIZATION_PROVIDERS], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 
platformBrowserDynamic().bootstrapModule(AppModule);

依賴

"dependencies": { 
    "@angular/common": "^2.3.1", 
    "@angular/compiler": "^2.3.1", 
    "@angular/core": "^2.3.1", 
    "@angular/forms": "^2.3.1", 
    "@angular/http": "^2.3.1", 
    "@angular/material": "^2.0.0-beta.2", 
    "@angular/platform-browser": "^2.3.1", 
    "@angular/platform-browser-dynamic": "^2.3.1", 
    "@angular/router": "^3.3.1", 
    "core-js": "^2.4.1", 
    "hammerjs": "^2.0.8", 
    "rxjs": "^5.0.1", 
    "ts-helpers": "^1.1.1", 
    "zone.js": "^0.7.2" 
    }, 
    "devDependencies": { 
    "@angular/compiler-cli": "^2.3.1", 
    "@types/hammerjs": "^2.0.34", 
    "@types/jasmine": "2.5.38", 
    "@types/node": "^6.0.42", 
    "angular-cli": "1.0.0-beta.24", 
    "codelyzer": "~2.0.0-beta.1", 
    "jasmine-core": "2.5.2", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "1.2.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-remap-istanbul": "^0.2.1", 
    "protractor": "~4.0.13", 
    "ts-node": "1.2.1", 
    "tslint": "^4.0.2", 
    "typescript": "~2.0.3" 
    }

來源

2017-02-23 Himanshu Yadav

您能不能告訴plunker例如......你代碼在這裏工作http://plnkr.co/edit/AiqtVcMFo8ShzLe18ArU?p=preview – laser

它似乎正在努力工作。我究竟做錯了什麼？ –

你試過MaterialModule.forRoot（）而不是MaterialModule – laser

-1

由於它工作在plunker：http://plnkr.co/edit/AiqtVcMFo8ShzLe18ArU?p=preview

我建議這個列表進行檢查：

總是先檢查版本（可能是在一些較老版中的錯誤）
我不是100％肯定，你可以混合使用MD-列表使用md-button-toggle-group child的子標記...檢查源（由plunker工作）。潛在的問題是，你嵌套的標籤曲折...

正常：

<md-list> 
    <md-list-item> 
    </md-list-item> 
</md-list>

和

<md-button-toggle-group> 
    <md-button-toggle> 
    </md-button-toggle> 
</md-button-toggle-group>

但是你必須：

<md-list> 
    <md-button-toggle-group> 
     <md-list-item> 
      <md-button-toggle> 
      </md-button-toggle> 
     </md-list-item> 
    </md-button-toggle-group> 
</md-list>

css樣式和代碼是如何編譯angular2指令的，並不是任何人都可以覆蓋樣式。有時樣式可以通過/ deep /（或>>>）修飾符遍歷所有代碼。

使用MaterialModule.forRoot（）中的AppModule

來源

2017-02-23 15:52:21 laser

Angular2：切換按鈕無法正常工作

回答

相關問題