如何使用* ngIf条件从html调用函数 - IONIC 2

Question

简要说明 - 我的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;">-->
        <!--&lt;!&ndash; Add card content here! &ndash;&gt;-->
        <!--<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;">-->
        <!--&lt;!&ndash; Add card content here! &ndash;&gt;-->
        <!--<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;">-->
        <!--&lt;!&ndash; Add card content here! &ndash;&gt;-->

        <!--<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>

编辑2：添加视频链接以获得更清晰的要求

看这个视频 - https://youtu.be/JT4HsuRp-YQ，

一旦选择了日期，我必须要求用户“点击向下滚动”，我希望这是自动发生的，意味着一旦日期填满就应该调用dd()函数，希望事情现在清楚了

Answer 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

将更改事件添加到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>    

Answer 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>