时间戳

首页 > 解决方案 > 单击 onSubmit 时更新 ngIf

angular - 单击 onSubmit 时更新 ngIf

问题描述

有什么简单的方法可以转换 *ngif 来显示由 onSubmit （按钮单击）调用的图像？

目前，当在下拉菜单中选择一个项目时，它会触发图像的 *ngIF。我想更改此设置，以便仅在选择 onSubmit 后图像才会更改/更新。

    <button type="button" class="btn btn-default dropdown-toggle col" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      {{form.site}} <i class="fa fa-caret-down"></i>
    </button>
    <ul class="dropdown-menu col">
      <li role="menuitem"><a class="dropdown-item" (click)="form.site='main2'">Main 2</a></li>
      <li role="menuitem"><a class="dropdown-item" (click)="form.site='main3'">Main 3</a></li>
    </ul>

  <div class="input-group field">
    <button type="button" (click)="onSubmit($event)" [disabled]="isLoading" class="btn btn-primary col">Submit</button>
  </div>
  <!-- image loading -->
  <div class="row" *ngIf="!isLoading">
    <h5 *ngIf="form.site=='main2'">
      <img src="assets/img/small.png"> Today</h5>
    <h5 *ngIf="form.site=='main3'">
      <img src="assets/img/s_small.png"> Today</h5>
  </div>

标签： angularangularjs-directive

解决方案

更改下拉项目上的单击事件以调用打字稿类中的函数。该函数将设置一个变量，并且 *ngIf 将关闭该变量。

推荐阅读