Angular 7，使用相同变量的嵌套函数 [英] Angular 7, nested function using same variable

问题描述

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

I'm trying to run one function - "createThreeDates()" that can generate three different results (dates based on -90, -60, -45), using the same variable. After a user sets a date in the input field, that date variable is set and used in the function. The Generate 1 button calls the function. Everything works fine if I only needed one date (not three). FYI, this function uses the installed/import package "add-subtract-date."

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

There are NO ERRORS in my code, but the function returns the SAME date (fortyDaysDate) to all three input fields in the browser (?). -I don't know how this is possible when I have different ngModels.

这是component.ts ...

Here is 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 ...

Here is 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>

推荐答案

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

This is more of a code review than an answer. Your syntax is not correct here.

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

• Remove the curly braces inside the function.
• Make sure the function "subtract" is not mutating the variable passed in. You may want to "clone" the variable "_retireSet" so that you're not mutating it inside this function.
• Use "const" if you're not reassigning the variable. In this function you are so you need to use "let".
• As @crashmstr noted change the function return type to void

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

Side note: Function name is confusing. "getAllDates" this is implying you're returning an object with dates. Instead change the name to prepareAllDates or createAllDates or something similar.

请记住，设置"和获取"分别意味着设置变量"和获取变量".

Remember that "Set" and "Get" implies "Setting a Variable" and "Getting a Variable" respectively.

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

** Update ** From your comment below it looks like you're having an issue with javascript itself.

按值分配

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

这篇关于Angular 7，使用相同变量的嵌套函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！