我是 ionic 新手，我有這個專案可以在選擇日期時自動提交并顯示報告。問題是當我選擇一個未提交資料的日期時。這是我的 .ts 代碼。
async showRepo(item_date: Date) {
this.db.repoProduct(item_date).then((_) =>
{
console.log(_);
this.product = {};
});
}
這是我的 .html 代碼
<ion-item>
<ion-input
type="date"
(ionInput)='showRepo(item_date)'
></ion-input>
</ion-item>
提前致謝。
uj5u.com熱心網友回復：
您可以通過多種方式實作。創建一個變數并將其與 ion-input 作為 ngModel 附加，并使用 ngModelChange 事件來捕獲輸入更改。
如果您使用 ion-datetime 您可以使用 ionChange 事件來獲取日期更改。
app.component.html
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Hello</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Pick date</ion-label>
<ion-input
value="{{ date | date: 'dd.MM.yyyy' }}"
id="date"
class="ion-text-end"
></ion-input>
<ion-popover
size="cover"
trigger="date"
show-backdrop="false"
[dismissOnSelect]="true"
>
<ng-template>
<ion-datetime
#popoverDatetime
presentation="date"
[(ngModel)]="date"
locale="en-US"
(ngModelChange)="pickDateModelChange($event)"
(ionChange)="ionChangeEvent(popoverDatetime.value)"
></ion-datetime>
</ng-template>
</ion-popover>
</ion-item>
</ion-content>
</ion-app>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
private dateValue: any;
get date(): any {
return this.dateValue;
}
set date(value: any) {
console.log({ value });
this.dateValue = value;
}
constructor() {}
ngOnInit() {}
pickDateModelChange(dateValue): void {
console.log('ngModel change triggered');
console.log(dateValue);
//here you need to add your date format function and service call
}
ionChangeEvent(date: Date): void {
console.log('ion change event triggered');
console.log(date);
//here you need to add your date format function and service call
}
}
作業示例在這里
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/505898.html
上一篇：離子電容器：錯誤：未在網路上實作