Angular 离子2组分不渲染

我开始构建一个新的Ionic 2应用程序，但其中的一些Ionic组件无法正确渲染（例如，选择框、卡）。我使用Angular CLI启动了该项目，现在使用的是侧边栏模板

我的一个模板中的HTML如下所示：

<ion-view view-title="Games">
    <ion-content>
        <ion-grid>
            <ion-row>
                <ion-list>
                    <ion-item>
                        <ion-label>Console</ion-label>
                        <ion-select [(ngModel)]="consoleSelected" multiple="true">
                            <ion-option ng-repeat="console in consoles" value="nes">{{ console.Name }}</ion-option>
                        </ion-select>
                    </ion-item>
                </ion-list>
                <ion-list>
                    <ion-list-header>
                        Games
                    </ion-list-header>
                    <ion-item ng-repeat="game in games" href="#/app/game/{{game.ID}}">
                        {{ game.Title }}
                    </ion-item>
                </ion-list>
            </ion-row>
        </ion-grid>
    </ion-content>
</ion-view>

安慰
{{console.Name}
游戏
{{game.Title}

ion卡和ion select组件的渲染效果不理想。我不认为离子视图/内容/网格和行组件也在渲染，但我真的不知道

但是，如果我使用CSS类添加组件：

 <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" ng-model="loginData.username">
        </label>

用户名

组件渲染正确。第一个不正确模板中的代码是从爱奥尼亚文档中复制的

我正在使用爱奥尼亚服务运行应用程序，并在Chrome中查看它。我还附上了第一个组件的屏幕截图

有人知道我要做什么才能让他们表演吗

---

首先

离子视图

是离子1“组件”。它不存在于离子>=2中。 您的模板结构类似于：

<ion-header>
 <ion-navbar>
  <!-- title and buttons -->
 </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <!-- list items -->
  </ion-list>
</ion-content>
<ion-footer><!-- optional>
 <ion-toolbar>
 </ion-toolbar>
</ion-footer>

谢谢你的帮助。您的评论“ion view是一个ionic 1”组件“”使我检查是否安装了正确版本的ionic，因为我从示例模板复制了该组件。我不小心创建了一个爱奥尼亚1项目。