Question

我是新手。我试图克隆一组可以正常工作的元素，但是当我在控制台中或在视图中进行操作时，无法获得新克隆元素的最新值。

可能是因为一个名为temp的变量正在获取克隆的值。如何在控制台中获取各个字段的值，如

example=[{
    exp1="aaa",
    exp2="bbb",
    exp3="tea"
 },{
    exp1="ddd",
    exp2="eee",
    exp3="mango"
 }]

？

请参阅以下链接，获取代码的工作副本： https://stackblitz.com/edit/angular-gvwv4g-h2sxnd

Answer 1

您可以通过这种方式使用

this.example.push（JSON.parse（JSON.stringify（this.temp）））;

请参考以下示例 https://stackblitz.com/edit/angular-gvwv4g-effowp

Answer 2

您需要将表单填充的值复制到一个新对象中，然后将该新对象推送到您的数组中，然后可以重置您的对象值，因此新添加的行将为空。

我已如下编辑您的input-overview-example.ts

import { Component , OnInit} from '@angular/core';

import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
/**
 * @title Basic Inputs
 */
@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample implements OnInit {
   // test Start
   foods=["mango","tea","apple"]
  example= [ ];

   temp: any;

  //test ends

 ngOnInit() {
   this.initTemp();
    this.example.push(this.temp);
  }

testAdd(){

  console.log(this.temp)
  console.log(JSON.stringify(this.example)+"-------");
  this.initTemp();
  this.example.push({
                      exp1: this.temp.exp1,
                      exp2: this.temp.exp2,
                      exp3: this.temp.exp3,
                      });

}

initTemp() {
  this.temp = {
    exp1:"",
    exp2:"",
    exp3:""
  }
}
}

克隆值将附加到新模板值上

2 个答案: