我刚刚开始在 Android 上使用条形码扫描器构建我的第一个 ionic 应用程序。 对于条形码集成的开发,我使用了这个文档:https://www.djamware.com/post/59bb219f80aca768e4d2b13e/example-of-ionic-3-angular-4-cordova-barcode-and-qr-code-scanner
目前一切正常。但是现在我想在扫描条形码或二维码后对 home.page.html 上的输出实现时间戳。
有谁知道如何实现时间戳?
非常感谢您!
主页.page.html:
<ion-header>
<ion-toolbar color="primary">
<ion-title>
QR-Scanner
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-button color="success" expand="full" shape="round" (click)="scan()">Start Scan</ion-button>
<ion-card *ngIf="productFound">
<ion-card-header>
<h2 color="success" >Object: {{selectedProduct.name}}</h2>
</ion-card-header>
<ion-card-content>
<ul>
<li>{{selectedProduct.plu}}</li>
<li>{{selectedProduct.price}}</li>
<li>{{selectedProduct.desc}}</li>
</ul>
</ion-card-content>
</ion-card>
</ion-content>
主页.page.ts:
import { NavController } from '@ionic/angular';
import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { Toast } from '@ionic-native/toast/ngx';
import { DataServiceService } from '../../app/data-service.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
products: any[] = [];
selectedProduct: any;
productFound:boolean = false;
public dateTime : string = '';
constructor(public navCtrl: NavController,
private barcodeScanner: BarcodeScanner,
private toast: Toast,
public dataService: DataServiceService) {
this.dataService.getProducts()
.subscribe((response)=> {
this.products = <any[]>response
console.log(this.products);
});
}
scan() {
this.selectedProduct = {};
this.barcodeScanner.scan().then((barcodeData) => {
this.selectedProduct = this.products.find(product => product.plu === barcodeData.text);
if(this.selectedProduct !== undefined) {
this.productFound = true;
} else {
this.productFound = false;
this.toast.show(`Product not found`, '5000', 'center').subscribe(
toast => {
console.log(toast);
}
);
}
}, (err) => {
this.toast.show(err, '5000', 'center').subscribe(
toast => {
console.log(toast);
}
);
});
}
}
数据服务.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable({
providedIn: 'root'
})
export class DataServiceService {
constructor(private http: HttpClient) {
console.log('Hello DataServiceService Provider');
}
getProducts(){
return this.http.get('assets/data/products.json')
.map((res:Response)=>res.json());
}
}
应用程序模块.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { Toast } from '@ionic-native/toast/ngx';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
BarcodeScanner,
Toast
],
bootstrap: [AppComponent]
})
export class AppModule {}
最佳答案
我们可以使用Date
这是JS提供的。因此,当您进行扫描时,获取当前时间戳并将其存储到您的 selectedProduct
中,例如在名为 scannedAt
this.barcodeScanner.scan().then((barcodeData) => {
this.selectedProduct = this.products.find(product => product.plu === barcodeData.text);
if(this.selectedProduct !== undefined) {
this.selectedProduct.scannedAt = new Date(); // add this!
this.productFound = true;
}
// ...
然后你可以使用 Angular DatePipe
决定如何在模板中显示它,例如:
{{ selectedProduct.scannedAt | date: 'short' }}
关于javascript - ionic 条形码扫描器时间戳集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55200282/