如何輛火力通過離子打字稿

嗨，所以我「車輛加姆特里」創建和想補充的功能，它允許在用戶登錄到車輛添加到他們的個人資料添加到特定的用戶，變得與相關他們的用戶，這意味着當我能夠從firebase拉出所有與用戶相關的車輛時。 Front End to ADD a vehicle Front End to ADD a vehicle 下面是我的代碼：如何輛火力通過離子打字稿

在firebase.ts頁：

addVehicle(model, make, year, mileage, location) { 
    this.afd.list('/vehicles/').push({model: model , make: make, year: year, mileage: mileage, location: location} 
    ); 
    }

這是我addvehicle.html頁

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 

    <ion-title> 
     Add a Vehicle 
    </ion-title> 

    </ion-navbar> 
</ion-header> 
<ion-content padding id="page23"> 
    <!--<form id="addAVehicle-form14">--> 
    <ion-item color="none" id="addAVehicle-list-item39"> 
     <ion-icon name="car" item-left></ion-icon> 
     <ion-input type="text" placeholder="Vehicle Model" [(ngModel)]="newVehicle"></ion-input> 
     <ion-note item-right></ion-note> 
     <!--<ion-icon name="car" item-left></ion-icon> 
     <ion-input type="text" placeholder="Vehicle Model" [(ngModel)]="newVehicle2"></ion-input> 
     <ion-note item-right></ion-note>--> 
    </ion-item> 
    <ion-item id="addAVehicle-select2"> 
     <ion-label> 
     --make-- 
     </ion-label> 
     <ion-select name="newVehicle2" [(ngModel)]="newVehicle2"> 
     <ion-option value="BMW"> 
      BMW 
     </ion-option> 
     <ion-option value="Kia"> 
      Kia 
     </ion-option> 
     <ion-option value="Mercedes-Benz"> 
      Mercedes-Benz 
     </ion-option> 
     <ion-option value="Opel"> 
      Opel 
     </ion-option> 
     <ion-option value="VW"> 
      Volkswagen 
     </ion-option> 
     </ion-select> 
    </ion-item> 
    <ion-item id="addAVehicle-select3"> 
     <ion-label> 
     --year of car-- 
     </ion-label> 
     <ion-select name="newVehicle3" [(ngModel)]="newVehicle3"> 
     <ion-option value="2017"> 
      2017 
     </ion-option> 
     <ion-option value="2016"> 
      2016 
     </ion-option> 
     <ion-option value="2015"> 
      2015 
     </ion-option> 
     <ion-option value="2014"> 
      2014 
     </ion-option> 
     <ion-option value="2013"> 
      2013 
     </ion-option> 
     <ion-option value="2012"> 
      2012 
     </ion-option> 
     <ion-option value="2011"> 
      2011 
     </ion-option> 
     <ion-option value="2010"> 
      2010 
     </ion-option> 
     <ion-option value="2009"> 
      2009 
     </ion-option> 
     <ion-option value="2008"> 
      2008 
     </ion-option> 
     <ion-option value="2007"> 
      2007 
     </ion-option> 
     </ion-select> 
    </ion-item> 
    <ion-item id="addAVehicle-range2"> 
     <ion-label range-left> 
     Mileage at registration 
     </ion-label> 
     <ion-input type="text" placeholder="Mileage" [(ngModel)]="newVehicle4"></ion-input> 
    </ion-item> 
    <ion-item color="none" id="addAVehicle-list-item40"> 
     <ion-icon name="pin" item-left></ion-icon> 
     Location 
    </ion-item> 

    <ion-input type="text" placeholder="Location" [(ngModel)]="newVehicle5"></ion-input> 
    <!--<button (click)="upload()" id="addAVehicle-button56" ion-button color="positive"> 
     Front view 
    </button>--> 

    <ion-content padding> 
     <img src="{{pathForImage(lastImage)}}" style="width: 100%" [hidden]="lastImage === null"> 
     <h3 [hidden]="lastImage !== null">Please Select Image!</h3> 
    </ion-content> 

    <ion-footer> 
     <ion-toolbar color="primary"> 
     <ion-buttons> 
      <button ion-button icon-left (click)="presentActionSheet()"> 
      <ion-icon name="camera"></ion-icon>Select Image 
      </button> 
      <button ion-button icon-left (click)="uploadImage()" [disabled]="lastImage === null"> 
      <ion-icon name="cloud-upload"></ion-icon>Upload 
      </button> 
     </ion-buttons> 
     </ion-toolbar> 
    </ion-footer> 

    <button id="addAVehicle-button57" ion-button color="positive"> 
     Side view 
    </button> 
    <button id="addAVehicle-button58" ion-button color="positive"> 
     Rear view 
    </button> 
    <ion-item id="addAVehicle-toggle4"> 
     <ion-label> 
     My car has defects 
     </ion-label> 
     <ion-toggle color="positive" checked="false"></ion-toggle> 
    </ion-item> 
    <!--<ion-item color="none" id="addAVehicle-list-item40"> 
     <ion-icon name="ionic" item-left></ion-icon> 
     Item 
    </ion-item> 
    <ion-item color="none" id="addAVehicle-list-item41"> 
     <ion-icon name="ionic" item-left></ion-icon> 
     Item 
    </ion-item>--> 

    <ion-item> 
    <button ion-button color="positive" block (click)="addVehicle(); goToManage()"> 
    ADD VEHICLE 
    </button> 
    </ion-item> 
    <!--</form>--> 
</ion-content>

這是我的火力點至今：

[此處輸入圖像的描述] [3]

這是我addvehicle.ts：

import { Component } from '@angular/core'; 
import { NavController, ActionSheetController, ToastController, Platform, LoadingController, Loading } from 'ionic-angular'; 
import { DriverProfilePage } from '../driver-profile/driver-profile'; 
import { BookingRequestPage } from '../booking-request/booking-request'; 
import { ClientProfilePage } from '../client-profile/client-profile'; 
import { MyBookingsPage } from '../my-bookings/my-bookings'; 
import { ResultsPage } from '../results/results'; 
import { ChecklistPage } from '../checklist/checklist'; 
import { ViewCarDetailsPage } from '../view-car-details/view-car-details'; 
import { ChatPage } from '../chat/chat'; 
import { HomePage } from '../home/home'; 
import { LoginPage } from '../login/login'; 
import { RentalsPage } from '../rentals/rentals'; 
import { SignupPage } from '../signup/signup'; 
import { ManageCarsPage } from '../manage-cars/manage-cars'; 
import { AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database'; 
import { FirebaseProvider } from './../../providers/firebase/firebase'; 

import { File } from '@ionic-native/file'; 
import { Transfer, TransferObject } from '@ionic-native/transfer'; 
import { FilePath } from '@ionic-native/file-path'; 
import { Camera } from '@ionic-native/camera'; 

declare var cordova: any; 

@Component({ 
    selector: 'page-add-avehicle', 
    templateUrl: 'add-avehicle.html' 
}) 
export class AddAVehiclePage { 

    vehicles: FirebaseListObservable<any[]>; 
    newVehicle = ""; 
    newVehicle2 = ""; 
    newVehicle3 = ""; 
    newVehicle4 = ""; 

    lastImage: string = null; 
    loading: Loading; 

    constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider, private camera: Camera, private transfer: Transfer, private file: File, private filePath: FilePath, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController) { 
    this.vehicles = this.firebaseProvider.getVehicleList(); 
    } 

    public presentActionSheet() { 
    let actionSheet = this.actionSheetCtrl.create({ 
     title: 'Select Image Source', 
     buttons: [ 
     { 
      text: 'Load from Library', 
      handler:() => { 
      this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY); 
      } 
     }, 
     { 
      text: 'Use Camera', 
      handler:() => { 
      this.takePicture(this.camera.PictureSourceType.CAMERA); 
      } 
     }, 
     { 
      text: 'Cancel', 
      role: 'cancel' 
     } 
     ] 
    }); 
    actionSheet.present(); 
    } 

    public takePicture(sourceType) { 

    var options = { 
     quality: 100, 
     sourceType: sourceType, 
     saveToPhotoAlbum: false, 
     correctOrientation: true 
    }; 

    this.camera.getPicture(options).then((imagePath) => { 
     if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) { 
     this.filePath.resolveNativePath(imagePath) 
     .then(filePath => { 
      let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1); 
      let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?')); 
      this.copyFileToLocalDir(correctPath, currentName, this.createFileName()); 
     }); 
     } else { 
     var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1); 
     var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1); 
     this.copyFileToLocalDir(correctPath, currentName, this.createFileName()); 
     } 
    }, (err) => { 
     this.presentToast('Error selecting image.'); 
    }); 
    } 

    private createFileName() { 
    var d = new Date(), 
    n = d.getTime(), 
    newFileName = n + ".jpg"; 
    return newFileName; 
    } 

    private copyFileToLocalDir(namePath, currentName, newFileName) { 
    this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => { 
     this.lastImage = newFileName; 
    }, error => { 
     this.presentToast('Error while storing file.'); 
    }); 
    } 

    private presentToast(text) { 
    let toast = this.toastCtrl.create({ 
     message: text, 
     duration: 3000, 
     position: 'top' 
    }); 
    toast.present(); 
    } 

    public pathForImage(img) { 
    if (img === null) { 
     return ''; 
    } else { 
     return cordova.file.dataDirectory + img; 
    } 
    } 

    public uploadImage() { 
    // Destination URL 
    var url = "http://yoururl/upload.php"; 

    // File for Upload 
    var targetPath = this.pathForImage(this.lastImage); 

    // File name only 
    var filename = this.lastImage; 

    var options = { 
     fileKey: "file", 
     fileName: filename, 
     chunkedMode: false, 
     mimeType: "multipart/form-data", 
     params : {'fileName': filename} 
    }; 

    const fileTransfer: TransferObject = this.transfer.create(); 

    this.loading = this.loadingCtrl.create({ 
     content: 'Uploading...', 
    }); 
    this.loading.present(); 

    // Use the FileTransfer to upload the image 
    fileTransfer.upload(targetPath, url, options).then(data => { 
     this.loading.dismissAll() 
     this.presentToast('Image succesful uploaded.'); 
    }, err => { 
     this.loading.dismissAll() 
     this.presentToast('Error while uploading file.'); 
    }); 
    } 

    addVehicle(){ 
    this.firebaseProvider.addVehicle(this.newVehicle,this.newVehicle2,this.newVehicle3,this.newVehicle4); 
    } 

    goToDriverProfile(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(DriverProfilePage); 
    }goToBookingRequest(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(BookingRequestPage); 
    }goToClientProfile(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(ClientProfilePage); 
    }goToMyBookings(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(MyBookingsPage); 
    }goToResults(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(ResultsPage); 
    }goToChat(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(ChatPage); 
    }goToChecklist(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(ChecklistPage); 
    }goToViewCarDetails(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(ViewCarDetailsPage); 
    }goToHome(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(HomePage); 
    }goToLogin(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(LoginPage); 
    }goToRentals(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(RentalsPage); 
    }goToSignup(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(SignupPage); 
    }goToManage(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(ManageCarsPage); 

    }; 

    }

來源

2017-08-02 Daniel Xavier De Oliveira

基本上，我怎麼代碼，其中車輛應該去（在火力哪個用戶） –

您可以另一個字段添加到您的用戶（如生日，電子郵件等），命名爲「車輛」，然後添加他已經選定車輛的所有ID 。所以基本上你的火力數據庫將是這個樣子：

userProfile: { 
       user_key: { 
          "email": "user_email", 
          "vehicles": { 
             vehicle_key_1: true, 
             vehicle_key_2: true 
             } 
         } 
      }

在你addVehicle功能，通過用戶增加汽車的關鍵。然後改變這樣的功能：

addVehicle(user_key, model, make, year, mileage, location) { 
this.afd.list('/userProfile/user_key/vehicles').push({model: model , make: make, year: year, mileage: mileage, location: location} 
);

}

來源

2017-08-02 13:22:56

但我怎麼確保這些車輛都去那裏，我應該改變這裏的路徑：addVehicle（模型製作，一年，里程數，地點）{ this.afd.list（ '/輛/'）推動（{模式：模式，使：使，年：一年，里程：里程，位置：位置} ）; } –

我編輯了我的答案。試試吧。 –

請重新閱讀我的問題，並對其進行編輯。包含的線框 –

如何輛火力通過離子打字稿

回答

相關問題