Question

我正在尝试运行一个函数-“ createThreeDates（）”，该函数可以使用相同的变量生成三个不同的结果（基于-90，-60，-45的日期）。用户在输入字段中设置日期后，该日期变量将被设置并在函数中使用。生成1按钮调用函数。如果我只需要一个日期（而不是三个），那么一切都会很好。仅供参考，此功能使用已安装/导入的软件包“ add-subtract-date”。

我的代码中没有错误，但是该函数将相同的日期（fortyDaysDate）返回到浏览器中的所有三个输入字段（？）。 -我不知道当我有不同的ngModel时怎么可能。

这是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

这更多是代码审查，而不是答案。 您的语法在这里不正确。

删除函数中的花括号。
确保函数“减”未对传递的变量进行突变输入。您可能想要“克隆”变量“ _retireSet”，以便不会在此函数中对其进行更改。
如果不重新分配变量，请使用“ const”。在此功能您需要使用“ let”。
如@crashmstr所述，将函数返回类型更改为void

旁注：函数名称令人困惑。 “ getAllDates”表示您要返回一个带有日期的对象。而是将名称更改为prepareAllDates或createAllDates或类似名称。

请记住，“设置”和“获取”分别意味着“设置变量”和“获取变量”。

** 更新 ** 从下面的评论中，您似乎对javascript本身有疑问。

按值分配

dataFrame = pd.ExcelFile("xlFile.xlsx")
pd.set_option("display.precision", 20)
dataFrame.ColumnToRound = dataFrame.ColumnToRound.round(20)
dataFrame.to_csv("out.txt", index=False, sep='\t', float_format='%.20f')

按引用分配

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]

Answer 2

根据我在这篇文章中获得的建议，以下是可以解决问题的有效代码。

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

Angular 7，使用相同变量的嵌套函数

2 个答案: