Ionic 3: передать переменные провайдера на ионный ввод

Question

У меня есть этот простой провайдер:

import { Injectable } from "@angular/core";

@Injectable()
export class DevicesService {
    public check_string : any;

    constructor(){
        this.check_string = "Provider enabled";
    }

    getStatusString() { return this.check_string; }
}

и я пытаюсь передать эту переменную check_string ионному входу в моем home.ts:

<strong><ion-input round id="stringstatus" type="text" [(ngModel)]="stringstatus"></ion-input></strong>



import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DevicesService } from '../../providers/devicefactory/devicefactory';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public stateString : string;

  constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {
    this.stateString = this.deviceProvider.check_string;
    //this.stateString = this.deviceProvider.getStatusString();
  }

}   

Я пробовал оба способа: переменную прямого прохода и функцию возврата, но когда я запускаю приложение, отображается пустая страница ... что я мог пропустить?

Большое спасибо всем Ура!

Answer 1

Вы можете напрямую установить его в ngModel:

[(ngModel)]="deviceProvider.check_string"

или

[(ngModel)]="deviceProvider.getStatusString()"

Answer 2

Здравствуйте, Rameez и saperlipopette,

Я пытался как вы оба получить это:

devicefactory.ts

import { Injectable } from "@angular/core";
//import { BluetoothLE } from '@ionic-native/bluetooth-le';

@Injectable()
export class DevicesService {
    public ble_status : boolean;
    public check_string : any;

    // public BLE : BluetoothLE
    constructor(){
        this.ble_status = false; 
        //this.BLE.initialize();
        //this.BLE.isEnabled().then(result => { this.ble_status = result.isEnabled; });
        this.check_string = "Provider enabled";
    }

    getStatus() { return this.ble_status; }
    getStatusString() { return this.check_string; }

    enableBLE() {
        //if (this.ble_status) this.BLE.enable();  else  this.BLE.disable();
        if (this.ble_status) this.check_string = "Provider enabled";  else  this.check_string = "Provider disabled";
    }
}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HoergerateApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SettingsPage } from '../pages/settings/settings';
import { DevicesService } from '../providers/devicefactory/devicefactory';


@NgModule({
  declarations: [
    HoergerateApp,
    AboutPage,
    SettingsPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(HoergerateApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    HoergerateApp,
    AboutPage,
    SettingsPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    DevicesService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {

}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
   <p>
    Check bluetooth status:<br>
    <strong><ion-input round id="ble_state" type="text" [(ngModel)]="ble_state"></ion-input></strong>
  </p>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DevicesService } from '../../providers/devicefactory/devicefactory';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public ble_state : string;

  constructor(public navCtrl: NavController, public deviceProvider : DevicesService) {
    //this.ble_state = ( this.deviceService.ble_status ?  "Bluetooth is enabled" : "BLuetooth is disabled" );

    //this.ble_state = deviceProvider.check_string;
    this.ble_state = deviceProvider.getStatusString();
  }

}

До того, как я положил также непосредственно в [(ngModel)], но это касается пустой страницы ....Я думаю, что это связано с передачей переменных, может быть потому, что, если я прокомментирую, что:

this.ble_state = deviceProvider.getStatusString();

приложение кажется работающим ... Может быть, оно связано с платформами установки ionic и cordova или зависимостями, даже если оно не сообщалокакие-либо ошибки во время компиляции?

Спасибо

Answer 3

Попробуйте использовать deviceProvider.getStatusString().Без использования this в конструкторе;

constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {
    this.stateString = deviceProvider.getStatusString();
}