角度2 sidenav項目未顯示為行

Question

嗨，我正在嘗試顯示一個角度為2的sidenav，其中列為行的鏈接使我的頭呆了半天，試圖使其正常工作，這看起來是這樣的：

http://imgur.com/a/Muu2F

這是我的代碼：

<md-sidenav-container class="sidenav-fab-container" fullscreen>
<md-toolbar>
  <button (click)="sidenav.toggle()">
    <md-icon>add</md-icon>
  </button>
</md-toolbar>

<md-sidenav #sidenav mode="over" opened="false">
  <div>
  <md-list>
    <!--<h3>links:</h3>-->
    <md-list-item>
      <button (click)="sidenav.toggle()">
        <md-icon>add</md-icon>
      </button>
    </md-list-item>
    <md-list-item>
      <md-icon md-list-icon>folder</md-icon>
      <a md-line>hello World</a>
    </md-list-item>
    <md-list-item>
      <md-icon md-list-icon>folder</md-icon>
      <a>hello World</a>
    </md-list-item >
    <md-divider></md-divider>
    <md-list-item>
      <md-icon md-list-icon>folder</md-icon>
      <a>hello World</a>
    </md-list-item>
  </md-list>
  </div>
</md-sidenav>

<main-view-template></main-view-template>

sidenav.ts

import {Component, ViewEncapsulation} from '@angular/core';
import 'hammerjs';

@Component({
  moduleId : module.id,
  selector: 'side-nav-component',
  templateUrl: 'sideNav.component.html',
  encapsulation: ViewEncapsulation.None,
})

export class sideNavComponent{
}

任何幫助將不勝感激。 無法為我的生活弄清楚。

Answer 1

最終解決了它。 將項目類型更改為跨度並正確顯示：

<md-list-item>
    <button md-button>
      <md-icon>add</md-icon>
      <span>this is text</span>
    </button>
  </md-list-item>
  <br>
  <md-list-item class="side-nav-container">
    <button md-button>
      <md-icon>add</md-icon>
      <span>this is text</span>
    </button>
  </md-list-item>
  <br>
  <md-list-item>
    <button md-button>
      <md-icon>add</md-icon>
      <span>this is text</span>
    </button>

現在顯示如下

http://imgur.com/a/lOxEp

謝謝您的幫助！