Javascript Angular 5双向绑定以更新另一个字段

导出类中有两个字段。模板有一个下拉列表，其ngModel通过双向绑定绑定到第一个字段（selectedInterval）。当下拉选项更改时，将发生calculateReviewDate（）事件，并成功更新第二个字段（nextReviewDate），但在我两次选择相同选项之前，下拉列表将保持空白。此外，微调器在计算过程中从未出现。有人知道为什么吗

{{r.intervalDescription}}
审查说明

我不确定您的select问题，但我知道您的微调器出了什么问题。在

calculateReviewDate

方法中没有同步代码，因此不会显示微调器。JS在单个线程上运行，除非您将同步代码分解为多个部分，以便将控件返回给浏览器进行绘制，否则不会显示微调器。

如何获得ReviewInterval？对于微调器，我认为这是因为太快了，尝试在

this.showSpinner=this.nextreeviewdate==undefined之前添加延迟比如设定时间。
我认为您在这里有两个问题：
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;
}
}

1.一旦更改，所选值不会第一次显示。
2.微调器不会在“选择值更改”上显示。
为什么未显示微调器？
由于直接调用calculateReviewDate（）方法（同步行为），并且在该方法中，微调器在开始时设置为true，然后根据nextReviewDate变量将状态设置为true/false，因此我猜nextReviewDate变量永远不会成为未定义的变量，因此nextReviewDate始终保持一些有效值，因此，它再次设置为false，因此在后台，微调器将被渲染，并立即被删除，因为您使用了一个结构指令，并且该方法中的所有逻辑以同步方式发生，并且将在很短的时间内发生，因此，从视觉上看，我们无法看到渲染的微调器上下移动。
为什么“选择控制”选定值未显示？
我分享了一个你版本的修改示例，其中一切都很好，
模板：
纺纱机

{{r}}
审查说明
TS:
从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
审查间隔=[1,2,3,4,5]；
selectedInterval=5；
showSpinner=false；
下一个查看日期；
calculateReviewDate（值）：无效{
this.nextReviewDate=this.selectedI`enter code here`interval；
}
}
这是什么
让今天：日期=新日期（）确切地说是什么意思？它创建了一个值为00:00 today的javascript日期对象。let关键字正在设置一个TypeScript局部作用域变量。@user266909确实如此，但在您的类型规范中不要太过冗余，这是毫无意义的。让类型推断为您工作，尤其是在locals中。reviewIntervals绑定到导出类中的Interval类数组。interval类具有以下属性：interval（数字的）和intervalDescription（字符串的，例如1个月、3个月、1年）您的表单不是被动表单，表单控件应该是双向绑定，nextReviewDate不是双向绑定，因此它应该在表单之外或添加[ngModelOptions]=“{standalone:true}”；要添加延迟，可以像下面这样使用setTimeOut
setTimeOut（（）=>{let calculator:calculateDate=new calculateDate（）；let today:Date=new Date（）；this.nextReviewDate=calculator.addMonth（今天，this.selectedInterval）；}，1000）；this.showSpinner=false