Question

我在导出的类中有两个字段。模板有一个下拉列表，其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;
}

Answer 1

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

Answer 2

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

Answer 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;
}
}

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

3 个答案: