首页 文章

Ionic 2组件无法渲染

提问于
浏览 次
0

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

离子卡和离子选择组件不会像它们那样呈现 . 我不认为离子视图/内容/网格和行组件正在渲染，但我无法分辨 .

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

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

组件正确呈现 . 但是，第一个不正确的模板中的代码是从Ionic文档复制的 .

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

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

enter image description here

angular ionic2

1 回答

  • 0

    Firstly ion-view 是离子1 "component" . 它在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>

    相关文档：

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

    Angular tutorial docs .

    回复于

相关问题