添加到 Ionic 应用程序的标签显示在 Web 浏览器预览中，但不在应用程序上

Question

所以我按照 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>

web browser app image这是应用程序在浏览器中显示的内容（在顶部你可以看到我想要显示的内容）

mobile application screenshot 以及移动应用程序上显示的内容。

下面是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>

Answer 1

试试这个

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