Приложение Ionic / Angular5 некорректно отображается на одном телефоне

Question

У меня есть приложение Ionic 4.4.0 / Angular 5.0.1, которое отображает угловые переменные на странице с помощью выражений {{}}. Это правильно работает на MotoG5 / Android 7.0, но не на huawei ALE-L23 / Android 5.0.1. Он даже не показывает статические метки, только часть представления, которая представляет собой график холста, а остальное - пустое пространство. Хотя, если мы коснемся пустого пространства, мы увидим всплывающее окно выбора ионов и варианты.

Я искал похожий случай без удачи.

Я бы хотел знать, сталкивался ли кто-то с подобной проблемой и как вы ее решили, или если кто-то может определить, что не так, пожалуйста.

Вот код для просмотра:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      {{ 'GRADES.TITLE' | translate }}
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding id="page3">

    <h1 id="calificaciones-heading1" style="color:#000000;" text-center>
      {{calificacionesAlumno.nombre}}
    </h1>
    <h4 text-center>{{calificacionesAlumno.escuela}}</h4>
    <p text-center>{{ 'GRADES.GRADE-GROUP' | translate }} - {{calificacionesAlumno.gradoGrupo}}</p>
    <p text-center>Periodo: {{calificacionesAlumno.periodo}}</p>
    <ion-list id="calificaciones-list4">
      <ion-item id="calificaciones-select2">
        <ion-label>
          {{ 'GRADES.SELECT-MONTH' | translate }}
        </ion-label>
        <ion-select name="" (ionChange)="obtenerCalificacionesPorPeriodo($event)" interface="popover">
          <ion-option (ngModel)="periodoFiltro" *ngFor="let periodo of periodos" value="{{periodo}}">
            {{periodo}}
          </ion-option>
        </ion-select>
      </ion-item>
    </ion-list>

    <ion-card >
      <ion-card-header>
        {{ 'GRADES.GRAPH-TITLE' | translate }}
      </ion-card-header>
      <ion-card-content>
        <canvas #grafCalificaciones></canvas>
      </ion-card-content>
    </ion-card>

    <ion-list id="calificaciones-list7">
      <ion-item color="none" id="calificaciones-list-item5" *ngFor="let calificacion of calificacionesAlumno.calificaciones">
        <h2>
          {{calificacion.materia}}
        </h2>
        <h3>
          {{calificacion.calificacion}}
        </h3>

      </ion-item>
    </ion-list>
</ion-content>

и вот зависимости package.json

"dependencies": {
    "@angular/common": "5.0.1",
    "@angular/compiler": "5.0.1",
    "@angular/compiler-cli": "5.0.1",
    "@angular/core": "5.0.1",
    "@angular/forms": "5.0.1",
    "@angular/platform-browser": "5.0.1",
    "@angular/platform-browser-dynamic": "5.0.1",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/facebook": "4.4.2",
    "@ionic-native/google-plus": "4.4.2",
    "@ionic-native/push": "4.0.1",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ngx-translate/core": "9.0.2",
    "@ngx-translate/http-loader": "2.0.1",
    "angularfire2": "5.0.0-rc.4",
    "chart.js": "2.7.1",
    "cordova-plugin-facebook4": "1.7.4",
    "cordova-plugin-googleplus": "5.1.1",
    "cordova-plugin-statusbar": "2.3.0",
    "firebase": "4.6.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "ngx-webstorage": "2.0.1",
    "phonegap-plugin-push": "1.10.5",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.2",
    "gulp": "3.9.1",
    "gulp-replace": "0.6.1",
    "gulp-zip": "4.0.0",
    "merge-stream": "1.0.1",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "com.googleusercontent.apps.1234"
      },
      "phonegap-plugin-push": {
        "SENDER_ID": "1234"
      },
      "cordova-plugin-facebook4": {
        "APP_ID": "1234",
        "APP_NAME": "appName"
      }
    }
  }

UPDATE: Я изменил шаблон на этот предопределенный с ионного, и он работал. https://ionicframework.com/docs/components/#card-advanced-social

Причина, по которой я считаю, что он работал на одном телефоне, а не на другом, заключается в том, что, возможно, веб-представления различны, а механизм их рендеринга может быть другим. Теперь мы видим важность тестирования на разных телефонах!

Answer 1

Замените {{выражения}} на жестко закодированные вещи и посмотрите, действительно ли проблема в том, что angular не отображает значения переменных или это проблема css.