无法在打字稿函数中传递参数

Question

我有一个名为 DipComponent.ts 的组件，在这个组件中我有一个名为 submit 的函数，这个函数将 3 个数据传递给另一个页面中名为 DipService.ts 的函数（ine 数组，一个数字和另一个数组）。最后一个数组（对象数组）在页面 DipComponent.ts 中充满了数据，但是当我尝试在 DipService.ts 中读取它时，它看起来是空的。这是我的代码 DipComponent.ts:

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { competenza } from '../interfaces/competenza';
import { dipendente } from '../interfaces/dipendente';
import { AssenzeService } from '../services/assenzeservice';
import { CompetenzeService } from '../services/competenzeservice';
import { DipendentiService } from '../services/dipendenteservice';

@Component({
  selector: 'app-modificadip',
  templateUrl: './modificadip.component.html',
  styleUrls: ['./modificadip.component.css']
})
export class ModificadipComponent implements OnInit {
  [x: string]: any;
  public dipendentemodificato: any[] = [];
  public dip: dipendente[] = [];
  public competenze: competenza[]=[];
  public competenzeDip: competenza[]=[];
  public competenzeposs = [];
  public optionsMap=<any>[];
  public optionsChecked = <any>[];
  public options=<any>[];
  public stringtemp: string=''
  public Comps=<any[]>([])
  public idcomp!: number[];



  constructor (private route : ActivatedRoute, public DS:DipendentiService, public 
CS:CompetenzeService, public AS:AssenzeService) {
    var id=this.route.snapshot.params.id

    this.DS.getdipendentebyid(id).toPromise().then(data =>{console.log(data);
      for(let i in data){  
        this.dip.push(data[i]);
      }
    });

this.CS.getcompetenze().toPromise().then(data =>{console.log(data);
  for(let i in data){  
    this.competenze.push(data[i]);

  }
});

this.CS.getcompetenzebyiddipendente(id).toPromise().then(data =>{console.log(data);
  for(let i in data){  
    this.competenzeDip.push(data[i]);
  }
});
}

  ngOnInit(): void {
    this.initOptionsMap();
  }

  submit(login: any){
     console.log("submit dipendente", login)
     for(let i in login){  
     this.dipendentemodificato.push(login[i]);
    }
console.log("modifiche del dipendente: "+this.dipendentemodificato)

//----------------
for(var x in this.optionsMap) {
  if(this.optionsMap[x]) {
      this.optionsChecked.push(x);
  }
}
for (var k = 0; k<this.optionsChecked.length; k++) {
  console.log("id competenza "+this.optionsChecked[k])
  this.CS.getcompetenzabyid(this.optionsChecked[k]).toPromise().then(data =>{console.log("datas: "+JSON.stringify(data));
      this.Comps.push(data);
  });
}
console.log(this.Comps)
//----------------

this.DS.postmoddipendenti(this.dipendentemodificato, this.route.snapshot.params.id, this.Comps)
}



  initOptionsMap() {
    for (var x = 0; x<this.competenze.length; x++) {
        this.optionsMap[x] = true;
   }
 }
  updateCheckedOptions(option:number, event:any) {
    this.optionsMap[option] = event.target.checked;
    console.log("dopo aggiornamento "+this.optionsMap[option])
  }

}

这是我感兴趣的 DipService.ts 函数的代码：

postmoddipendenti(raw: any,id:number,comp=<any[]>([])){
    console.log("::::::"+ comp)        
    var dip = '{'  +'"id"'+':'+id+','+'"nome"'+':'+'"'+raw[0]+'"'+','+'"cognome"'+':'+'"'+raw[1]+'"'+','+'"data_nascita"'+':'+'"'+raw[2]+'"'+','+'"mail"'+':'+'"'+raw[3]+'"'+','+'"telefono"'+':'+raw[4]+','+'"setCompetenze"'+':'+'[]'  +'}'
    console.log("non json ->"+ dip)
    //const obj = JSON.parse(dip);
    //console.log("obj ->"+ obj)
   

   // this.http.post<any>('http://localhost:8080/postdipendenti', obj).subscribe(
      //  (val) => {console.log("POST call successful value returned in body", val);
   // })
    }

谢谢你，抱歉我的英语不好。

Answer 1

我认为你的变量 this.Comps 是空的，因为你以异步方式填充它:

this.CS.getcompetenzabyid(this.optionsChecked[k]).toPromise().then(data =>{console.log("datas: "+JSON.stringify(data));
      this.Comps.push(data);
  });

所以当你这样做时

this.DS.postmoddipendenti(this.dipendentemodificato, this.route.snapshot.params.id, this.Comps)

可能数组还没有填满

你的 console.log(this.Comps) 显示什么？如果它是一个空数组，我认为是因为那个。

所以在那种情况下，您应该等待所有事件完成。在你的情况下你使用 .toPromise() 所以你可以做一个 Promise.all 而不是 forEach.

但请注意，在大多数情况下，建议避免使用 Angular 中的 Promises 并继续使用 Observables。如果您想了解更多信息，可以查看 Angular 文档和 RxJs 库。

无论如何，除了异步之外，我现在没有看到更多的解释。

编辑：

一个向您展示 await Promises 和 Promise.all() 工作原理的示例。但是您可以（并且应该）在网上找到更多关于它的详细教程。

所以当你这样做的时候 this.CS.getcompetenzabyid(this.optionsChecked[k]).toPromise() 你会得到一个承诺。这不是您可以直接使用的值。它会解决并给你最终的价值，但你不知道确切的时间。例如，当您运行来自您的代码的 SQL 请求时，就会发生这种情况。您不知道请求需要多长时间。

而Javascript是一种“非阻塞”语言。这意味着它不会等待 DB 回答，它会做其他事情来不浪费时间。在我们的例子中，其他的意思是“继续执行代码”。

我们之前获得的 Promise 对象允许 javascript 在结果最终到达时处理结果（当发生这种情况时，您的代码可能已经很远了）。

所以要处理这个 Promise，您有两种方法：

或者您给 then 关键字一个回调。
或者您使用关键字 await 来“屏蔽”代码

使用 then 方法（您在代码中使用的方法），您不能强制 javascript 不执行您之后编写的代码。

但是 await 你可以。你会写这样的东西：

const data = await this.CS.getcompetenzabyid(this.optionsChecked[k]).toPromise()

这样你会在变量“数据”中得到 Promise 的结果（当它被解决时）。并且使用 await 关键字 javascript 将等待结果而不执行任何代码。

所以总结一下你可以写：

const data = await this.CS.getcompetenzabyid(this.optionsChecked[k]).toPromise(); this.Comps.push(data);

而且您可以确定 this.Comps 是最新的。如果您只有一个请求要做。

但在您的情况下，您几乎没有承诺，因为您在 forEach 中执行的请求很少。所以你需要等待所有这些。为此，我们可以使用函数 Promise.all() 来等待你给他的所有 Promise。

所以在你的情况下：


    const datas = [];
          for (var k = 0; k<this.optionsChecked.length; k++) {
           //create array of Promises
 datas.push(this.CS.getcompetenzabyid(this.optionsChecked[k]).toPromise());
          }
          // Wait for all the promises to resolve and get all the datas
          const resolvedDatas = await Promise.all(datas);
          this.Comps = resolvedDatas;

像这样，您应该在 Comps 变量中包含您请求的所有值。并且您确定在获取所有数据之前不会完成对服务的调用。

我希望一切都清楚。我尽量简短，所以请不要犹豫，在线查找更多信息。

希望它能解决您的问题。但即使没有，也可以避免将来出现错误。

无法在打字稿函数中传递参数

can't pass an argument in a typescript function

javascript

angularjs

typescript