Javascript 将多个FormGroup类型转换并连接为Angular 5中的对象类型

Im使用角材料设计库的mat步进机

我使用3个单独的表单组。我将使用httpClient方法将信息发送到数据库，为此我创建了一个接口：

export interface NouveauProjet {
    leadProj: String ;
    nomProj: String;
    descProj: String;
    besProj: Number;
    pers: [Personnes];
    Backlog: [Fonctionnalite]
}

export interface Personnes {
    name: String;
    poste:String
}
export interface Fonctionnalite {
    fonctionnalite: String;
    userStory: String 
}

在我的组件文件中，我创建表单和包含我的值的

nouveauProject

变量

export class AjoutProjetComponent implements OnInit {
  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  thirdFormGroup: FormGroup;
  nouveauProjet: NouveauProjet;
  constructor(
    private _formBuilder: FormBuilder,
    private ajoutProj: AjoutprojService
  ) {}

  ngOnInit() {
    console.log();
    this.firstFormGroup = this._formBuilder.group({
      leadProj: ["", Validators.required],
      nomProj: ["", Validators.required],
      descProj: ["", Validators.required],
      besProj: ["", Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      pers: this._formBuilder.array([this.createItem()])
    });

    this.thirdFormGroup = this._formBuilder.group({
      backlog: this._formBuilder.array([this.createFonct()])
    });
  }

  createItem(): FormGroup {
    return this._formBuilder.group({
      name: ["", Validators.required],
      poste: ["", Validators.required]
    });
  }

  createFonct(): FormGroup {
    return this._formBuilder.group({
      fonctionnalite: ["", Validators.required],
      userStory: ["", Validators.required]
    });
  }

我调用我的服务，然后连接formGroup.value

  addProjet() {
    this.nouveauProjet =
      this.firstFormGroup.value +
      this.secondFormGroup.value +
      this.thirdFormGroup.value;
    console.log(this.nouveauProjet);
    this.ajoutProj
      .addProj(this.nouveauProjet)
      .toPromise()
      .then(res => {
        console.log(res.json);
      });
  }
}

在html文件中，我调用

addProject

函数，然后打印

{{nouvaprojet | json}}

值，得到以下结果：

"[object Object][object Object][object Object]"

如何打印所有值

更新：this.firstFormGroup.value、this.secondFormGroup.value、this.thirdFormGroup.value按顺序给出：

---

对象无法与

+

连接，因此您可以尝试：

老办法：

var __assign = (this && this.__assign) || Object.assign || function(t) {
  for (var s, i = 1, n = arguments.length; i < n; i++) {
    s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
        t[p] = s[p];
    }
    return t;
};
this.nouveauProjet = __assign(this.firstFormGroup.value, this.secondFormGroup.value, this.thirdFormGroup.value);

---

我得到这个错误：

src/app/ajout-projet/ajout-projet.component.ts（72,31）中的错误：错误TS1005:'：'预期。

3times@HamzaHaddad你能提供一个例子说明这个.firstFormGroup.value是什么吗，

this.secondFormGroup.value

和

this.thirdFormGroup.value

give。复制您的解决方案时，我没有添加这三个点，现在它可以工作了。这三个点是什么意思？@HamzaHaddad您可以在这里阅读更多关于es6 spread运算符的信息让我们来看看。

this.nouveauProjet = {
      ...this.firstFormGroup.value,
      ...this.secondFormGroup.value,
      ...this.thirdFormGroup.value
};