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

问题描述

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

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

这里是 component.ts...

 import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';从'../calculator.service'导入{CalculatorService}；从加减日期"导入{加减}；从'@angular/forms' 导入 { NgForm, FormGroup };@成分({选择器:'app-home'，templateUrl: './home.component.html',styleUrls: ['./home.component.css']})导出类 HomeComponent 实现 OnInit {公共四十天日期:任何；公共六十天日期:任何；公共九十天日期:任何；私人_retireSet:日期；@Input() set retireSet(date: Date) {this._retireSet = new Date(date);}构造函数(私有计算器服务:CalculatorService){}ngOnInit() {}公共 createThreeDates(): 无效 {让 d: 日期 = this._retireSet;让九十天返回 = 减去(d，90，天")；this.ninetyDaysDate = NinetyDaysBack;console.log('90 是 ' + this.ninetyDaysDate);let SixtyDaysBack = add(d, 30, "days");this.sixtyDaysDate = SixtyDaysBack;console.log('60 是 ' + this.sixtyDaysDate);让四十天返回 = 添加(d，15，天")；this.fortyDaysDate = fortyDaysBack;console.log('45 是 ' + this.fortyDaysDate);//此处将 SixtyDaysDate 的值更改为 fortyDaysDate 的值...console.log('60 是 ' + this.sixtyDaysDate);}}}

这里是 component.html...

 
<form class="ret-form" #calcForm="ngForm" novalidate (ngSubmit)="onSubmit(calcForm)"><div class="form-group"><label for="retireSet">设置日期</label><input type="datetime-local" id="retireSet" name="RetireCalculatorSetDate" value="retireSet"ngModel #RetireCalculatorSetDate="ngModel" [(ngModel)]="retireSet" class="form-control"/>
<div><button type="button" class="btn btn-lg btn-outline-dark" (click)="createThreeDates()">生成1</button><div><input type="text" name="RetireCalculatorDay90" value="ninetyDaysDate" ngModel #RetireCalculatorDay90="ngModel"[(ngModel)]="ninetyDaysDate" class="form-control"/>

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

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

</表单>

解决方案

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

• 删除函数内的花括号.
• 确保函数subtract"没有改变传递的变量在.您可能想要克隆"变量_retireSet"，以便您不在此函数内对其进行变异.
• 如果您不重新分配变量，请使用const".在这个函数中所以你需要使用让".
• 正如@crashmstr 指出的那样，将函数返回类型更改为 void

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

请记住，Set"和Get"分别意味着Setting a Variable"和Getting a Variable".

** 更新 **从您下面的评论来看，您似乎遇到了 javascript 本身的问题.

按值分配

var batman = 7;var 超人 = 蝙蝠侠；//按值赋值超人++;控制台日志(蝙蝠侠)；//7控制台日志(超人)；//8

按引用分配

var flash = [8,8,8];var quicksilver = flash;//按引用赋值快银.push(0);控制台日志(闪存)；//[8,8,8,0]控制台日志(快银)；//[8,8,8,0]

针对您的具体问题:

var x = new Date()var y = 新日期(x)x.setFullYear('2019');x//日期 2019-11-01T13:59:56.083Zy//日期 2018-11-01T13:59:56.083Z

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."

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.

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

        }
    }

    }

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.

• 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

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.

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

Assign By Value

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

Assign By Reference

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]

For your specific issue:

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屋！