Угловая 7, вложенная функция, использующая ту же переменную

Question

Я пытаюсь запустить одну функцию - «createThreeDates ()», которая может генерировать три разных результата (даты основаны на -90, -60, -45), используя одну и ту же переменную. После того, как пользователь устанавливает дату в поле ввода, эта переменная даты устанавливается и используется в функции. Кнопка Generate 1 вызывает функцию. Все отлично работает, если мне нужно только одно свидание (не три). К вашему сведению, эта функция использует установленный / импортируемый пакет «add-subtract-date».

В моем коде НЕТ ОШИБОК, но функция возвращает ОДНУ ЖЕ (сорокDaysDate) во все три поля ввода в браузере (?). -Я не знаю, как это возможно, когда у меня разные ngModels.

Вот это component.ts ...

    import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
    import { CalculatorService } from '../calculator.service';
    import { add, subtract } from 'add-subtract-date';
    import { NgForm, FormGroup } from '@angular/forms';


    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {

      public fortyDaysDate: any;
      public sixtyDaysDate: any;
      public ninetyDaysDate: any;



      private _retireSet: Date;
      @Input() set retireSet(date: Date) {
        this._retireSet = new Date(date);
      }

    constructor(private calculatorService: CalculatorService) { 
      }

      ngOnInit() {
      }

    public createThreeDates(): void {
      let d: Date = this._retireSet;
      let ninetyDaysBack = subtract(d, 90, "days");
      this.ninetyDaysDate = ninetyDaysBack;
  console.log('90 is ' + this.ninetyDaysDate);

        let sixtyDaysBack = add(d, 30, "days");
        this.sixtyDaysDate = sixtyDaysBack;
        console.log('60 is ' + this.sixtyDaysDate);

         let fortyDaysBack = add(d, 15, "days");
         this.fortyDaysDate = fortyDaysBack;
         console.log('45 is ' + this.fortyDaysDate);

// the value of sixtyDaysDate changes to fortyDaysDate value here...
         console.log('60 is ' + this.sixtyDaysDate);

        }
    }

    }

Вот это component.html ...

 <div class="container">
    <form class="ret-form" #calcForm="ngForm" novalidate (ngSubmit)="onSubmit(calcForm)">

    <div class="form-group">
        <label for="retireSet">Set Date</label>
        <input type="datetime-local" id="retireSet" name="RetireCalculatorSetDate" value="retireSet" 
        ngModel #RetireCalculatorSetDate="ngModel" [(ngModel)]="retireSet" class="form-control" />
    </div>

    <div>
 <button type="button" class="btn btn-lg btn-outline-dark" (click)="createThreeDates()">Generate 1</button>      

    <div>
  <input type="text" name="RetireCalculatorDay90" value="ninetyDaysDate" ngModel #RetireCalculatorDay90="ngModel" 
  [(ngModel)]="ninetyDaysDate" class="form-control" />
    </div>

    <div>
  <input type="text" name="RetireCalculatorDay60" value="sixtyDaysDate" ngModel #RetireCalculatorDay60="ngModel" 
  [(ngModel)]="sixtyDaysDate" class="form-control" />
    </div>

  <input type="text" name="RetireCalculatorDay45" value="fortyDaysDate" ngModel #RetireCalculatorDay45="ngModel" 
[(ngModel)]="fortyDaysDate" class="form-control" />
    </div>


    </form>
    </div>

Answer 1

После совета, который я получил по этому сообщению, вот код, который работал (FYI) для решения проблем.

component.HTML ...

  <div class="form-group">
                <label for="retireSet">Set Retirement Date</label>
                <input type="datetime-local" id="retireSet" name="RetireCalculatorSetDate" ngModel #RetireCalculatorSetDate="ngModel"
 [(ngModel)]="retireSet" [(ngModel)]="retireSet60" [(ngModel)]="retireSet45" 
                    class="form-control" /> <div>

           <div><button type="button" class="btn btn-light" (click)="createThreeDates()">Calculate Dates</button> </div> 

    <div>
                <input type="hidden" name="RetireCalculatorDay90" value="ninetyDaysDate" ngModel #RetireCalculatorDay90="ngModel"
                [(ngModel)]="ninetyDaysDate" class="form-control" />
                <p class="textNinety"> 90 day notice is due {{ ninetyDaysDate | date: "longDate" }}. </p>
            </div>

     <div>
                <input type="hidden" name="RetireCalculatorDay60" value="sixtyDaysDate" ngModel #RetireCalculatorDay60="ngModel"
                [(ngModel)]="sixtyDaysDate" class="form-control" />
                <p>  60 day notice is due {{ sixtyDaysDate | date: "longDate" }}. </p>
            </div>   


     <div>
                <input type="hidden" name="RetireCalculatorDay45" value="fortyDaysDate" ngModel #RetireCalculatorDay45="ngModel"
                [(ngModel)]="fortyDaysDate" class="form-control" />
                <p> 45 day notice is due {{ fortyDaysDate | date: "longDate" }}. </p>
            </div> 

component.ts ...

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { CalculatorService } from '../calculator.service';
import { add, subtract } from 'add-subtract-date';
import { NgForm, FormGroup } from '@angular/forms';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public fortyDaysDate: any;
  public sixtyDaysDate: any;
  public ninetyDaysDate: any;
  public myRetDatePlus45: Date;
  public myRetDatePlus60: Date;
  public myRetDatePlus90: Date;

 private _retireSet: Date;
  @Input() set retireSet(date: Date) {
    this._retireSet = new Date(date);
    this.myRetDatePlus90 = this._retireSet;
  }

  private _retireSet60: Date;
  @Input() set retireSet60(date: Date) {
    this._retireSet60 = new Date(date);
    this.myRetDatePlus60 = this._retireSet60;
  }

  private _retireSet45: Date;
  @Input() set retireSet45(date: Date) {
    this._retireSet45 = new Date(date);
    this.myRetDatePlus45 = this._retireSet45;
  }


  constructor(private calculatorService: CalculatorService) { 
  }

  ngOnInit() {
  }



 public createThreeDates(): void { 
  let dNinety: Date = this.myRetDatePlus90;
  let ninetyDaysBack = subtract(dNinety, 90, "days");
  this.ninetyDaysDate = ninetyDaysBack;

 let dSixty: Date = this.myRetDatePlus60;
 let sixtyDaysBack = subtract(dSixty, 60, "days");
 this.sixtyDaysDate = sixtyDaysBack;
 console.log('60 is ' + this.sixtyDaysDate);

  let dForty: Date = this.myRetDatePlus45;
  let fortyDaysBack = subtract(dForty, 45, "days");
  this.fortyDaysDate = fortyDaysBack;
 }

Answer 2

Это скорее обзор кода, чем ответ. Ваш синтаксис здесь неправильный.

• Удалите фигурные скобки внутри функции.
• Убедитесь, что функция "вычитание" не изменяет переданную переменную в. Вы можете "клонировать" переменную "_retireSet", чтобы вы не мутировать это внутри этой функции.
• Используйте «const», если вы не переназначаете переменную. В этой функции вы так, что вам нужно использовать «пусть».
• Как заметил @crashmstr, измените тип возвращаемого значения функции на void

Примечание: Название функции сбивает с толку. «getAllDates» это означает, что вы возвращаете объект с датами. Вместо этого измените имя на prepareAllDates или createAllDates или что-то подобное.

Помните, что «Set» и «Get» подразумевают «Установка переменной» и «Получение переменной» соответственно.

** Обновление ** Из вашего комментария ниже, похоже, что у вас проблемы с самим javascript.

Назначить по значению

var batman = 7;
var superman = batman;   //assign-by-value
superman++;
console.log(batman);     //7
console.log(superman); //8

Назначить по ссылке

var flash = [8,8,8];
var quicksilver = flash;   //assign-by-reference
quicksilver.push(0);
console.log(flash);        //[8,8,8,0]
console.log(quicksilver); //[8,8,8,0]

Для вашей конкретной проблемы:

var x = new Date()

var y = new Date(x)

x.setFullYear('2019');

x //Date 2019-11-01T13:59:56.083Z
y //Date 2018-11-01T13:59:56.083Z