Angular 5双向绑定更新另一个字段答案

【问题标题】：Angular 5 two-way binding to update another fieldAngular 5双向绑定更新另一个字段
【发布时间】：2018-04-10 00:31:54
【问题描述】：

我在导出的类中有两个字段。该模板有一个下拉菜单，其 ngModel 绑定到具有双向绑定的第一个字段 (selectedInterval)。当下拉选项更改时，calculateReviewDate() 事件发生并成功更新第二个字段 (nextReviewDate)，但下拉列表保持空白，直到我两次选择相同的选项。此外，微调器在计算过程中永远不会出现。有谁知道为什么？

<form #FormVar="ngForm" novalidate>
  <div class="form-group">
    <div class="row">
      <div class="col col-md-2 col-sm-3">
          <input type="text" [ngModel]="nextReviewDate | date:shortDate" name="nextReviewDate" id="nextReviewDate1" class="form-control" disabled/>
      </div>
      <div class="col col-md-1 com-sm-3" *ngIf="showSpinner">
        <fa [name]="'spinner'" [size]=1 [spin]=true></fa>
      </div>
      <div class="col col-md-2 col-sm-3">
        <select class="form-control" name="nextReviewDate" id="nextReviewDate2" [(ngModel)]="selectedInterval" (change)="calculateReviewDate()">
                          <option *ngFor="let r of reviewIntervals" [value]="r.interval">{{r.intervalDescription}}</option>
                        </select>
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="!FormVar.valid" (click)="save(FormVar)">Review Note</button>

</form>

calculateReviewDate(): void {
  this.showSpinner = true;
  let calculator: calculateDate = new calculateDate();
  let today: Date = new Date();
  this.nextReviewDate = calculator.addMonth(today, this.selectedInterval);
  this.showSpinner = this.nextReviewDate === undefined;
}

【问题讨论】：

let today: Date = new Date(); 到底是什么意思？
它创建了一个 JavaScript Date 对象，其值为今天 00:00。 let 关键字是设置一个 TypeScript 局部作用域变量。
@user266909 确实如此，但不要在您的类型规范中如此多余，这是没有意义的。让类型推断为您工作，尤其是与本地人一起工作

标签： javascript angular typescript

【解决方案1】：

如何获得 reviewIntervals？而对于微调器，我认为是因为太快了，尝试在this.showSpinner = this.nextReviewDate === undefined;like 设置超时之前添加延迟。

【讨论】：

reviewIntervals 绑定到导出类中的Interval 类数组。间隔类有以下属性：interval（数字）和intervalDescription（字符串，如1个月、3个月、1年）
您的表单不是反应式表单，表单控件应该是 2 路绑定，而 nextReviewDate 不是 2 路绑定，因此它应该在表单之外或添加 [ngModelOptions]="{standalone: true }";要添加延迟，您可以像这样使用 setTimeOut setTimeout(() => { let calculator: calculateDate = new calculateDate(); let today: Date = new Date(); this.nextReviewDate = calculator.addMonth(today, this.selectedInterval); }, 1000); this.showSpinner = false;

【解决方案2】：

不确定您的选择问题，但我知道您的微调器发生了什么。 calculateReviewDate 方法中没有异步代码，因此不会显示微调器。 JS 在单线程上运行，除非您将同步代码分解为允许将控件返回给浏览器进行绘制的部分，否则您的微调器将不会显示。

【讨论】：

【解决方案3】：

I think you have two issues here:

1. onChange, the selected value is not shown the first time.
2. Spinner is not shown on Select value change.

Why the Spinner is not shown?
On Change since the calculateReviewDate() method is being called directly (Synchronous behavior), and in this method the spinner is set to true in the starting and then state gets set to either true/false based on nextReviewDate variable, I guess nextReviewDate variable would never become undefined,so nextReviewDate always holds some valid value, so it sets to false again, so in the background the spinner will become rendered and immediately gets removed as you have used a structural directive  and all logic in the method happens synchronous manner and will be in a very short span, so visually we are not able to see the rendered spinner getting on and off.

Why the Select controls selected value is not shown?
I have shared a modified example of your version in which things are fine,

Template:
<div>
  <form #FormVar="ngForm" novalidate>
  <div class="form-group">
    <div class="row">
      <div class="col col-md-2 col-sm-3">
        <div class="form-group">
          <input type="text" [ngModel]="nextReviewDate" name="nextReviewDate" id="nextReviewDate1" class="form-control" disabled/>
        </div>
      </div>
      <div class="col col-md-1 com-sm-3" *ngIf="showSpinner">
        <p>Spinner</p>
      </div>
      <div class="col col-md-2 col-sm-3">
        <select class="form-control" name="nextReviewDate" id="nextReviewDate2" [(ngModel)]="selectedInterval" (change)="calculateReviewDate()">
                          <option *ngFor="let r of reviewIntervals" [value]="r">{{r}}</option>
                        </select>
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary" >Review Note</button>

</form>
</div>

TS:
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  reviewIntervals = [1,2,3,4,5];
  selectedInterval = 5;
  showSpinner = false;
  nextReviewDate;


  calculateReviewDate(value): void {
    this.nextReviewDate = this.selectedI`enter code here`nterval;
}
}

【讨论】：