Angular2：切换按钮无法正常工作

Question

我正在尝试在pod 'FacebookCore' pod 'FacebookLogin' pod 'FacebookShare' 中显示素材2切换按钮。不知道他们为什么出现在单选按钮上。

md-list

app.module.ts

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

依赖关系

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);

Answer 1

鉴于它适用于plunker：http://plnkr.co/edit/AiqtVcMFo8ShzLe18ArU?p=preview

我建议检查这个清单：

1. 始终先检查版本（可能是某些旧版本中的错误）
2. 我不是100％确定你可以将md-list子标签与md-button-toggle-group子混合......来检查来源（通过plunker工程）。问题的可能性是你在zigzagging的标签嵌套......

正常：

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

1. css样式和代码如何编译angular2指令，不是任何人 重写风格。有时样式可以使用/ deep /（或＆gt;＆gt;＆gt;）修饰符来完成所有代码。

2. 在AppModule中使用MaterialModule.forRoot（）