Ionic 2 组件未渲染

Question

我开始构建一个新的 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>

ion-card 和 ion-select 组件不会像应有的那样渲染。我不认为 ion-view/content/grid 和 row 组件正在渲染，但我无法确定。

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

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

组件正确渲染。不过，第一个 incorrect 模板中的代码是从 Ionic 文档中复制而来的。

我正在使用 ionic serve 运行应用程序并在 Chrome 中查看它。我还附上了第一个组件的屏幕截图。

有人知道我必须做什么才能让它们渲染吗？

Answer 1

首先ion-view是一个离子1“组件”。它在 Ionic >= 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-header
• ion-content
• ion-footer

其次您正在混合使用 AngularJS 和 Angular >=2 语法。 Ionic 2 使用 Angular 2，而 Ionic 3.x 使用 Angular 4。 您应该使用*ngFor 而不是ng-repeat。

Angular tutorial docs.