angular - 如何在 Ionic 2 中使用 *ngIf 条件从 html 调用函数？

标签 angular ionic-framework ionic2

我的 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

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

最佳答案

不要使用 this 作用域，在 Controller 中设置变量 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 作为日期选择器使用 ngModel

<ion-datetime (ngModelChange)="dd()"  style="color:#818993;" displayFormat="DD/MM/YYYY" name="myDate" [(ngModel)]="myDate"   item-start></ion-datetime>

关于angular - 如何在 Ionic 2 中使用 *ngIf 条件从 html 调用函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47938525/

上一篇：Angular - 如何定义动画参数默认值？

下一篇：javascript - Angular 4 this.http.get(...).map 不是函数

相关文章：

unit-testing - 如何在 Angular dart 测试中触发组件事件？

Angular 2 Animation - bool 触发器？

javascript - Angular 在所需组件内创建动态组件

css - 如何在标签的左侧获得 ionic 切换？

ionic-framework - ionic - ion-nav-buttons ng-click 不起作用

javascript - 如何在图像上绘制 Angular2 Ionic2

angular - ngFor 在删除项目时不更新

ionic-framework - 不希望页面在查看时刷新 - Ionic 2+

angular - 访问 FormArray 中的对象属性并更新 Angular 4 中的值

javascript - 使用 Ionic - 无法正确加载 Firebase - 错误 : Module 'firebase' is not available

©2024 IT工具网  联系我们