Ionic2 ion-content 不渲染内容答案

【问题标题】：Ionic2 ion-content not render contentIonic2 ion-content 不渲染内容
【发布时间】：2016-09-26 16:31:27
【问题描述】：

我尝试使用 ion-content 作为：

<ion-content>
    <ion-list>
        <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)" class="list-item">
            <img class="picture" src="/build/images/profile/{{item.picture}}" item-left/>
            <div class="item-data">
                <div>
                    <span class="title">{{item.title}}</span>
                    <span class="sub-title">{{item.typeWork}}</span>
                    <span class="distance"><ion-icon name="map" item-right></ion-icon>{{item.distance}} km</span>
                </div>
                <div class="evaluation">
                    <span><ion-icon name="cash"></ion-icon>{{item.noteAveragePrice}}</span>
                    <span><ion-icon name="ribbon"></ion-icon>{{item.noteAverageService}}</span>
                    <span><ion-icon name="clock"></ion-icon>{{item.noteAverageScore}}</span>
                </div>
            </div>
            <!--
            <span class="description">{{item.description}}</span>
            -->
        </button>
    </ion-list>
    <div *ngIf="selectedItem" padding>
        You navigated here from <b>{{selectedItem.title}}</b>
    </div>
</ion-content>

而不是渲染内容：

当移除 ion-content 标签时，显示内容，但不包含滚动

【问题讨论】：

标签： ionic-framework angular ionic2

【解决方案1】：

我发现了问题，我在类的控制器中使用了视图（带有离子内容）@Component而不是@Page。 @Page 更改后对我有用。

之前

import {Component, ViewChild} from '@angular/core';
import {NavController, Alert, Content} from 'ionic-angular';
import {ProfessionalModel} from './professional-model';

@Component({
    templateUrl: 'build/pages/professional/professional-view.html'
})

之后

import {ViewChild} from '@angular/core';
import {NavController, Alert, Content, Page} from 'ionic-angular';
import {ProfessionalModel} from './professional-model';

@Page({
    templateUrl: 'build/pages/professional/professional-view.html'
})

【讨论】：