如何在 Ionic 2 中使用 *ngIf 条件从 html 调用函数？
Posted
技术标签:
【中文标题】如何在 Ionic 2 中使用 *ngIf 条件从 html 调用函数？【英文标题】：How to call a function from html with *ngIf condition in Ionic 2? 【发布时间】：2018-06-04 22:21:25 【问题描述】：我的 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()。我该怎么做？
编辑 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" >
<!--</ion-item>-->
</div>
<div *ngIf="showImage1 && this.primary">
<img src="assets/imgs/dots.gif" >
</div>
<div *ngIf="showImage2 && this.report_to">
<img src="assets/imgs/dots.gif" >
</div>
<div *ngIf="showImage3">
<img src="assets/imgs/dots.gif" >
</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>
编辑 2
一旦选择了日期，我必须要求用户“点击向下滚动”，我希望这会自动发生，这意味着一旦日期被填满，就应该调用 dd() 函数。
【问题讨论】：
【参考方案1】：不要使用 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
向您的日期选择器添加更改事件：
<ion-datetime (change)="dd()" style="color:#818993;" displayFormat="DD/MM/YYYY" name="myDate" [(ngModel)]="myDate" item-start></ion-datetime>
编辑 3
正如@Swoox 正确建议的那样，最好的方法应该是使用 ngModelChange 作为你的 datepicker 使用 ngModel
<ion-datetime (ngModelChange)="dd()" style="color:#818993;" displayFormat="DD/MM/YYYY" name="myDate" [(ngModel)]="myDate" item-start></ion-datetime>
【讨论】：
一旦从日期选择器中选择了日期，你在哪里调用了html端的函数dd()？请注意 - 您必须在选择日期时调用 dd() 函数
你用什么来选择日期？输入日期选择器或选择下拉菜单？请发布您的日期选择器的 html 以及您的 dd 函数
这就是我的表单的样子，我会在一分钟内发布整个 html，dd() 函数只是用来向下滚动
请同时发布来自您的控制器的相关代码，以展示您尝试使用 dd() 函数实现的目标
确保结合 ngModel 和 ngModelChange 而不是 change。当然可以，但请阅读：***.com/questions/44840735/…【参考方案2】：
很简单：
<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>
【讨论】：
我试图在这里解释我需要什么 - dropbox.com/s/vw8x1k2j4fgprfn/Untitled.png?dl=0，我认为有一些差距 是正常的日期输入吗？我仍然认为(change)="dd(myDate)" 可以解决这个问题。如果使用 ngmodel，请使用 ngmodelonchange。 private dd(_date:any) this.myDate = _date
看这个视频-youtu.be/JT4HsuRp-YQ，一旦选择了日期，我必须要求用户“点击向下滚动”，我希望这会自动发生，意味着dd()函数应该被调用一次日期已满，希望现在一切都清楚以上是关于如何在 Ionic 2 中使用 *ngIf 条件从 html 调用函数？的主要内容，如果未能解决你的问题，请参考以下文章
组件上的 Angular *ngIf 指令不保存值（Ionic 3）
离子 - 当标签 <form> 中有 *ngIf 时无法获取离子输入的值