我的html页面上有一个日期字段。选择日期后，我希望从我的home.ts文件中调用一个函数。
以下是我的home.html代码：
<ion-list>
<ion-item text-wrap *ngIf="this.myDate" style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
You selected {{this.myDate}} as your target date.
我只想在选择日期后拨打dd()。我该怎么做？
我的HTML代码：
<!--
Generated template for the Dashboard2Page page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="headercolor" style="width:100%;">
<ion-title style="font-size:11px;">Dashboard</ion-title>
<button ion-button menuToggle>
<ion-icon name="menu" class="icon" style="color: #ffffff;font-size:17px;"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content style="background-color: #f5f8fa;">
<ion-toolbar color="headercolor" style="margin-bottom:-15px;width:100%;">
<ion-segment [(ngModel)]="Task">
<!--<ion-segment-button style="margin:0px -23px -15px -23px;color: #ffffff;" value="Tasks">-->
<!--Tasks-->
<!--</ion-segment-button>-->
<ion-segment-button style="color: #ffffff;margin-bottom:-15px;" value="My Task">
My Tasks ({{task_given}})
</ion-segment-button>
<ion-segment-button style="margin-bottom:-15px;color: #ffffff;" value="My Allocation">
My Allocations ({{my_task}})
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<div [ngSwitch]="Task" style="padding-top:30px;">
<!--<ion-list *ngSwitchCase="'Tasks'" ngSelected="selected" style="margin-top:-30px;">-->
<!--<p style="color:#ffffff;text-align:center; width:100%;margin-top:0;padding-left:9px;line-height:40px; padding-top:30px; height:130px; background-color:#3B4148;"><span style="font-size:25px;">Welcome</span>-->
<!--<br /><span style="font-size:30px;">{{loggedinuser}} !!</span></p>-->
<!--<ion-card style="border-bottom:1px solid #9FBECE;margin-top:30px;">-->
<!--<ion-card-content style="border-bottom:1px solid #9FBECE;">-->
<!--<!– Add card content here! –>-->
<!--<p style="font-size:20px;" (click)="my()">My task <ion-badge class="cart-badge">{{task_given}}</ion-badge> </p>-->
<!--</ion-card-content>-->
<!--</ion-card>-->
<!--<ion-card style="border-bottom:1px solid #9FBECE;">-->
<!--<ion-card-content style="border-bottom:1px solid #9FBECE;">-->
<!--<!– Add card content here! –>-->
<!--<p style="font-size:20px;" (click)="given()"> My Allocations <ion-badge class="cart-badge">{{my_task}}</ion-badge> </p>-->
<!--</ion-card-content>-->
<!--</ion-card>-->
<!--<ion-card style="border-bottom:1px solid #9FBECE;">-->
<!--<ion-card-header>-->
<!--<p style="color:#3B4148;"> Today's Task to do </p>-->
<!--</ion-card-header>-->
<!--<ion-card-content style="border-bottom:1px solid #9FBECE;">-->
<!--<!– Add card content here! –>-->
<!--<ion-list *ngFor="let list of dataa" >-->
<!--<ion-item class="desc" (click)="shiftt(list)" *ngIf="list.ENTDT === this.datt1">-->
<!--<p style="color:#9ea5a9;margin-top:10px;text-transform:capitalize">{{list.ENTUSR.toLowerCase() }}</p>-->
<!--<p style="color:#3B4148; margin-top:10px;text-transform:capitalize">{{list.TASKDESC.toLowerCase()}}</p>-->
<!--</ion-item>-->
<!--</ion-list>-->
<!--</ion-card-content>-->
<!--</ion-card>-->
<!--</ion-list>-->
<ion-list *ngSwitchCase="'My Task'" ngSelected="selected" padding style="margin-top:-30px;">
<ion-item no-lines *ngFor="let tot of ent_total;" style="text-transform:capitalize;border-bottom:1px dotted #9FBECE;padding-left:5px;padding-right:5px;padding-top:4px;padding-bottom:4px;" (click)="psusr(tot)">
<p style="color:#5990AE;width:30%;margin:0;text-align:center;padding-top:12px;float:left;font-size:27px;font-weight:bold;">{{tot.ENTTOTAL}}</p>
<p style="width:1px;height:55px;float:left;margin:0px 0px;border:1px dotted #9FBECE;"></p>
<p style="width:17px;height:17px;padding-top:0px;padding-left:4px;margin-top:20px;margin-left:-9px;border-radius:50%;float:left;background-color:#F2AF51;">
<ion-icon name="add-circle" style="border-radius:46%;color: #ffffff;font-size:10px;background-color:#ffffff;"></ion-icon>
</p>
<p text-wrap style="color:#5990AE;width:63%;margin:0;padding-top:17px;float:left; padding-left:30px;" >
<span style="font-size:18px;text-transform:capitalize;">{{tot.ENTUSR.toLowerCase()}}</span>
</p>
</ion-item>
<div style="margin-top:10px;background-color:#fff;height: 75px;border:1px dotted #9FBECE;" (click)="my()">
<p style="color:#5990AE;width:30%;margin:0;text-align:center;padding-top:34px;float:left;font-size:27px;font-weight:bold;">{{task_given}}</p>
<p style="width:1px;height:67px;float:left;margin-top: 3px;border:1px dotted #9FBECE;"></p>
<p style="width:17px;height:17px;padding-top:4px;padding-left:4px;margin-top:25px;margin-left:-9px;border-radius:50%;float:left;background-color:#F2AF51;">
<ion-icon name="add-circle" style="border-radius:50%;color: #ffffff;font-size:10px;background-color:#ffffff;"></ion-icon>
</p>
<p text-wrap style="color:#5990AE;width:63%;margin:0;padding-top:34px;float:left; padding-left:30px;" >
<span style="font-size:18px;text-transform:capitalize;">Total Tasks</span>
</p>
</div>
</ion-list>
<ion-list *ngSwitchCase="'My Allocation'" padding style="margin-top:-30px;">
<ion-item no-lines *ngFor="let tot of pri_total;" style="text-transform:capitalize;border-bottom:1px dotted #9FBECE;padding-left:5px;padding-right:5px;padding-top:4px;padding-bottom:4px;" (click)="priusr(tot)">
<p style="color:#5990AE;width:30%;margin:0;text-align:center;padding-top:12px;float:left;font-size:27px;font-weight:bold;">{{tot.PRITOTAL}}</p>
<p style="width:1px;height:55px;float:left;margin:0px 0px;border:1px dotted #9FBECE;"></p>
<p style="width:17px;height:17px;padding-top:0px;padding-left:4px;margin-top:20px;margin-left:-9px;border-radius:50%;float:left;background-color:#F2AF51;">
<ion-icon name="add-circle" style="border-radius:46%;color: #ffffff;font-size:10px;background-color:#ffffff;"></ion-icon>
</p>
<p text-wrap style="color:#5990AE;width:63%;margin:0;padding-top:17px;float:left; padding-left:30px;" >
<span style="font-size:18px;text-transform:capitalize;">{{tot.PRIMARY.toLowerCase()}}</span>
</p>
</ion-item>
<div style="margin-top:10px;background-color:#fff;height: 75px;border:1px dotted #9FBECE;" (click)="given()">
<p style="color:#5990AE;width:30%;margin:0;text-align:center;padding-top:34px;float:left;font-size:27px;font-weight:bold;">{{my_task}}</p>
<p style="width:1px;height:67px;float:left;margin-top: 3px;border:1px dotted #9FBECE;"></p>
<p style="width:17px;height:17px;padding-top:4px;padding-left:4px;margin-top:25px;margin-left:-9px;border-radius:50%;float:left;background-color:#F2AF51;">
<ion-icon name="add-circle" style="border-radius:50%;color: #ffffff;font-size:10px;background-color:#ffffff;"></ion-icon>
</p>
<p text-wrap style="color:#5990AE;width:63%;margin:0;padding-top:34px;float:left; padding-left:30px;" >
<span style="font-size:18px;text-transform:capitalize;">Total Tasks</span>
</p>
</div>
</ion-list>
</div>
<div *ngIf="!show" style="background-color: #f5f8fa;border-radius:7px 7px 7px 7px;width:70%;float:right;padding:10px;margin-right:20px;" >
<form #new="ngForm">
<ion-list>
<ion-item text-wrap style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
Hello,i am {{loggedinuser}}
</ion-item>
</ion-list>
<ion-list>
<ion-item text-wrap style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
Want to allocate a new task.
</ion-item>
</ion-list>
<ion-list>
<ion-item text-wrap *ngIf="this.Yes=='yes' && !showImage" style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
Select primary user
</ion-item>
</ion-list>
<ion-list>
<ion-item text-wrap *ngIf="this.primary" style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
You selected {{this.primary}}
</ion-item>
</ion-list>
<ion-list>
<ion-item text-wrap *ngIf="this.primary && !showImage1" text-wrap style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
Select the user which you want to report.
</ion-item>
</ion-list>
<ion-list>
<ion-item text-wrap *ngIf="this.report_to" text-wrap style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
You want to report to {{this.report_to}}
</ion-item>
</ion-list>
<ion-list>
<ion-item text-wrap *ngIf="this.report_to && !showImage2" text-wrap style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
Now select date.
</ion-item>
</ion-list>
<ion-list>
<ion-item *ngIf="this.report_to && !showImage2" style="box-shadow: 3px 3px 3px #ececec;border-radius:7px 0px 10px 7px;">
<ion-datetime style="color:#818993;" displayFormat="DD/MM/YYYY" name="myDate" [(ngModel)]="myDate" item-start></ion-datetime>
<ion-icon style="color:#424242;" ios="ios-calendar" md="md-calendar" item-end ></ion-icon>
<ion-icon style="color:#424242;" ios="ios-arrow-down" md="ios-arrow-down" onclick="dd()"></ion-icon>
</ion-item>
</ion-list>
<!--<ion-list>-->
<!--<ion-item text-wrap *ngIf="this.myDate && dd()">-->
<!--</ion-item>-->
<!--</ion-list>-->
<ion-list>
<ion-item text-wrap *ngIf="this.myDate" style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
You selected {{this.myDate}} as your target date.
<p (click)="dd()" style="float:right;"> click to scroll down</p>
</ion-item>
</ion-list>
<ion-list>
<ion-item text-wrap *ngIf="this.myDate" style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
Now type your task below.
</ion-item>
</ion-list>
<div>
<ion-list>
<ion-item text-wrap *ngIf="this.taskdesc" style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
You want to send task.Press send button.
</ion-item>
</ion-list>
</div>
<ion-list>
<ion-item text-wrap *ngIf="this.send=='send'" style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
Task send successfully.
</ion-item>
</ion-list>
<div style="background-color: #fff;">
<div *ngIf="showImage && this.Yes=='yes'">
<!--<ion-item *ngIf="showImage && this.Yes=='yes'" style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">-->
<img src="assets/imgs/dots.gif" height="50px" width="50px" >
<!--</ion-item>-->
</div>
<div *ngIf="showImage1 && this.primary">
<img src="assets/imgs/dots.gif" height="50px" width="50px" >
</div>
<div *ngIf="showImage2 && this.report_to">
<img src="assets/imgs/dots.gif" height="50px" width="50px" >
</div>
<div *ngIf="showImage3">
<img src="assets/imgs/dots.gif" height="50px" width="50px" >
</div>
<div *ngIf="!showImage && showimg && this.Yes=='yes' " text-wrap>
<button ion-button round outline style="color:#5990AE;border-color:#5990AE" (click)="pri()">KIRAT</button>
<button ion-button round outline style="color:#5990AE;border-color:#5990AE" (click)="pri1()">VARSHA</button>
<button ion-button round outline style="color:#5990AE;border-color:#5990AE" (click)="pri2()">VIVEK</button>
<button ion-button round outline style="color:#5990AE;border-color:#5990AE" (click)="pri3()">SAURABH</button>
<button ion-button round outline style="color:#5990AE;border-color:#5990AE" (click)="pri4()">REKHA</button>
</div>
<div *ngIf="!showImage1 && show1 && this.primary" text-wrap>
<button ion-button round outline style="color:#5990AE;border-color:#5990AE" (click)="report()">KIRAT</button>
<button ion-button round outline style="color:#5990AE;border-color:#5990AE" (click)="report1()">VARSHA</button>
<button ion-button round outline style="color:#5990AE;border-color:#5990AE" (click)="report2()">VIVEK</button>
<button ion-button round outline style="color:#5990AE;border-color:#5990AE" (click)="report3()">SAURABH</button>
<button ion-button round outline style="color:#5990AE;border-color:#5990AE" (click)="report4()">REKHA</button>
</div>
<div (click)="yes()" >
<button ion-button round outline *ngIf="this.Yes==null" style="color:#5990AE;border-color:#5990AE" >Yes</button>
</div>
<div>
<textarea style="border:none;width:85%;" placeholder="Enter description.." name="taskdesc" [(ngModel)]="taskdesc"></textarea>
</div>
<div>
<ion-icon name="send" (click)="onsubmit(new.value)" style="float:right;margin-top:-30px;margin-right:7px;"></ion-icon>
</div>
</div>
</form>
</div>
</ion-content>
<ion-footer style="height:50px;">
<div (click)="show=!show" style="margin-top:5px;margin-right:5px;box-shadow: 3px 3px 3px #9DA4AB;background-color: #CD6560;float:right;text-align:center;border-radius:50%;height:40px;width:40px;">
<ion-icon name="add" (click)="addd()" style="margin-top:10px;"></ion-icon>
</div>
</ion-footer>
一旦选择了日期，我必须要求用户＆＃34;点击向下滚动＆＃34;，我希望这是自动发生的，意味着在填写日期后应调用dd()函数。
答案 0 :(得分：5)
不要使用this范围，在控制器中设置变量myDate，如下所示：
@Component({
selector: 'my-page',
templateUrl: 'mypage.html',
})
export class MyPage {
public myDate
// function you call when u select date
setDate(){
this.myDate="2017-12-22";
}
}
在你的模板中：
<ion-list>
<ion-item text-wrap *ngIf="myDate" style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;">
You selected {{myDate}} as your target date.
</ion-item>
</ion-list>
修改
根据您更新的html代码，myDate是一个模型变量，在您选择日期时会自动设置。只需从您的模板中移除this范围，就像我上面的示例一样，它应该可以正常工作。
编辑2
向datepicker添加更改事件：
<ion-datetime (change)="dd()" style="color:#818993;" displayFormat="DD/MM/YYYY" name="myDate" [(ngModel)]="myDate" item-start></ion-datetime>
编辑3
正如@Swoox正确建议的那样，最佳方法应该是使用ngModelChange作为你的日期选择器使用ngModel
<ion-datetime (ngModelChange)="dd()" style="color:#818993;" displayFormat="DD/MM/YYYY" name="myDate" [(ngModel)]="myDate" item-start></ion-datetime>
答案 1 :(得分：1)
这很简单：
<ion-item text-wrap *ngIf="this.myDate" style="border-radius:7px 0px 10px 7px;box-shadow: 3px 3px 3px #ececec;" (click)="yourFunction(myDate)">
或者：
<div (click)="yourFunction(this.myDate)">You selected {{myDate}} as your target date. </div>