简要说明 – 我的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.
I want to call
dd()
only once date is selected. How shall i do this ?
感谢您的帮助
编辑1:我的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>
看这个视频 – https://youtu.be/JT4HsuRp-YQ,
一旦选择了日期,我必须要求用户“点击向下滚动”,我希望这是自动发生的,意味着一旦日期填满就应该调用dd()函数,希望事情现在清楚了
解决方法
不要使用此范围,在控制器中设置变量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是一个模型变量,当您选择日期时,它将自动设置.只需从您的模板中移除此范围,就像我上面的示例一样,它应该可以工作.
编辑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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。