首页 > 解决方案 > 添加到 Ionic 应用程序的标签显示在 Web 浏览器预览中,但不在应用程序上

问题描述

因此,我按照 YouTube 上的教程创建了一个应用程序,在左上角的网络浏览器中显示“休息时间”,左侧是可选的日期时间函数。这些都在网络浏览器中可见,但在我的移动设备上的应用程序中不可见。

我试过改变离子标签的颜色,但没有任何改变。日期时间的功能在那里,因为我知道按哪里但看不到实际文本。

同样在时间选择器中,没有其他数字可见,只有要选择的数字。

见图片。

下面是老师更改标签的代码,因此它是可见的,但它不起作用。

<ion-content>

    <ion-item>
        <ion-label color="primary"> Rest Duration</ion-label>
        <ion-datetime #myPicker display-format="mm:ss" placeholder="Tap here" [(ngModel)]="fullTime"></ion-datetime>
    </ion-item>

网络浏览器应用程序图像这是应用程序在浏览器中显示的内容(在顶部您可以看到我想要显示的内容)

移动应用程序屏幕截图,这是移动应用程序上显示的内容。

下面是homepage.html代码

<ion-content>

<ion-item>
    <ion-label color="warning"> Rest Duration</ion-label>
    <ion-datetime #myPicker display-format="mm:ss" placeholder="Tap here" [(ngModel)]="fullTime"></ion-datetime>
</ion-item>

<div style="height:50%"> 
<circle-progress (click)="startTime()"
  [percent]="percent"
  [maxPercent]="100"
  [radius]="radius"
  [showTitle]="false"  
  [showSubtitle]="false"
  [showUnits]="false"
  [outerStrokeWidth]="16"
  [outerStrokeColor]="'#8000FF'"
  [showZeroOuterStroke]="false"
  [backgroundStroke]="'#33003F'"
  [backgroundStrokeWidth]="3"
  [outerStrokeGradient]="true"
  [outerStrokeGradientStopColor]="'#FF00CB'"
  [showInnerStroke]="false"

<p>{{ elapsed.h }} : {{ elapsed.m }} : {{ elapsed.s }}</p>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ng-container *ngIf="timer == false; else running">
        <ion-fab-button (click)="startTime()">
            <ion-icon name="play"></ion-icon>
        </ion-fab-button>
    </ng-container>
    <ng-template #running>
        <ion-fab-button (click)="stopTime()">
            <ion-icon name="square"></ion-icon>
        </ion-fab-button>
    </ng-template>
</ion-fab>

标签: angularionic-framework

解决方案


尝试这个

<ion-content>
        <ion-item>
          <p> Rest Duration</p>
            <ion-datetime #myPicker display-format="mm:ss" placeholder="Tap here" [(ngModel)]="fullTime"></ion-datetime>
        </ion-item>

推荐阅读