标签: angular-ngmodelchange

Angular 1不接受onchange事件,但只接受onchange()事件.

另一方面,Angular 2接受两者ng-change()和(change)事件,它们似乎都在做同样的事情.

有什么不同？

哪一个最适合表现？

ngModelChange:

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

与变化:

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>

问题的基本前提如下：

我有一个具有各种（自定义）输入的组件，当这些输入值中的任何一个发生变化时，我都会对 API 端点进行 HTTP 调用，以重新计算我的受众范围，即它是一个营销活动系统，并且当用户定义受众人口统计时受众“到达”发生变化。

我使用 ngModelChanges 触发调用，效果非常好。

但是，我的问题是，当组件加载现有数据（来自之前的保存）时，它会填充输入，从而导致 ngModelChange 触发，从而导致我的 HTTP 调用在页面加载时多次触发。

示例 HTML：

<app-custom-input
        id="age-from"
        name="age-from"
        [(ngModel)]="audienceModel.ageFrom"
        [type]="'number'"
        (ngModelChange)="calcReach()"
></app-custom-input>
<app-custom-input
        id="age-to"
        name="age-to"
        [(ngModel)]="audienceModel.ageTo"
        [type]="'number'"
        (ngModelChange)="calcReach()"
></app-custom-input>

注意：我的自定义输入确实实现了ControlValueAccessor

.ts 文件：

calcReach() {
    if (!this.loading$.getValue()) {
      const filters = {
        ...this.audienceModel,
        audienceFileId: this.campaignService.campaign.audienceFileId
      };
      this.calcAudienceReach$ = this.campaignService.calcAudienceReach(filters).subscribe((reach: number) => {
        console.log('calc audience reach: ', reach);
      });
    }
  }

可以看出，我确实尝试使用在 ngOnInit() 末尾设置为 false 的加载指示器，但 ngModelChange 触发的调用都发生在 OnInit 之后（或之前？）。

我的组件实现了一个抽象组件，其中加载指示器定义为：

public loading$: BehaviorSubject<boolean> = new BehaviorSubject(true);

即它的初始值设置为 true（在抽象组件中），并且仅在 ngOnInit …

怎么样ngModelChange()？

(ngModelChange)是ngModel指令的@Output .它在模型改变时触发.如果没有ngModel指令,则不能使用此事件

但我不确定,ngModelChange它是如何工作的,如果我使用ngModelChange()事件,即使我没有提供模型名称ngModel.

<input #gb type="text" pInputText class="ui-widget ui-text" **ngModel**  
 (ngModelChange)="functionName($event)">

我已经完成了一个简单的 CRUD 应用程序，现在我必须添加一个搜索栏来过滤我的表格并向我显示与我数字相同的行。

我不知道在我的组件中做什么，我看到了管道和过滤器的不同东西，但我无法将它们调整到我的项目中。

我想知道是否有一种方法可以在不创建新方法的情况下实现到我的 component.ts。

组件.HTML

<div class="container">
  <ul class="table-wrapper">
    <div class="table-title">
      <div class="row">
        <div class="col-sm-4">
          <button *ngIf="metadata && metadata.addMD" (click)="addFunc(metadata)">{{metadata.addMD.label}}</button>
          <div class="show-entries">
            <span>Show</span>
            <label>
              <select [(ngModel)]="pageSize">
                <option *ngFor="let maxPerPage of rowsOnPageSet"
                        (click)="maxElements(maxPerPage)">{{maxPerPage}}</option>
              </select>
            </label>
            <span>users</span>
          </div>
        </div>

        <div class="col-sm-4">
          <h2 class="text-center">Users <b>Details</b></h2>
        </div>

        <div class="col-sm-4">
          <div class="search-box">
            <div class="input-group">
              <span class="input-group-addon"><i class="material-icons">&#xE8B6;</i></span>
--> //HERE I HAVE TO ADD THE FUNCTION OR SOMETHING ELSE
             <input type="text" class="form-control" [(ngModel)]="searchVal"
                 (ngModelChange)='checkSearchVal()'  placeholder="Search&hellip;">
            </div>
          </div>
        </div>
      </div>
    </div>

    <table class="table table-bordered">
      <thead> …