时间戳

首页 > 解决方案 > Javascript 数组如何正确地将值克隆到另一个数组。角 7

javascript - Javascript 数组如何正确地将值克隆到另一个数组。角 7

问题描述

我有一个组件，我想在数组的开头添加一个值，但出现错误。怎么了，请告诉我？

import { Component, OnInit } from '@angular/core';
import { DaoMockService } from '../../services/dao/dao-mock.service';
import { MatTableDataSource, } from '@angular/material';


@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {

  data;

  model = 
        {
            label: "Table label",
            extra: [
                "edit",
                "select"
            ],
            columns: [
                'color', 
                'desde', 
                'nombre'
            ]
        }

        dataFields: any[] = this.model.columns
        tableColumns: any[] = this.model.columns


  constructor(private dao: DaoMockService) { }

  ngOnInit() {
    this.createTable()
  }

  createTable() {

    console.log("dataFields --->", this.dataFields)
    // output: 
    // dataFields ---> (3) ["color", "desde", "nombre"]

    console.log("tableColumns --->",this.tableColumns)
    // output: 
    // tableColumns ---> (3) ["color", "desde", "nombre"]

    this.tableColumns.unshift("edit")

    console.log("dataFields --->", this.dataFields)
    // output: 
    // dataFields ---> (4) ["edit", "color", "desde", "nombre"]

    console.log("tableColumns --->",this.tableColumns)
    // output: 
    // tableColumns ---> (4) ["edit", "color", "desde", "nombre"]

    this.dao.getAll().subscribe( (res:any) => this.data = new MatTableDataSource(res.data.content))
  }

}

this.tableColumns.unshift("edit") 取消转换 dataFields 和
tableColumns 数组

标签： javascriptangulartypescript

解决方案

如果你这样做

dataFields: any[] = this.model.columns
     tableColumns: any[] = this.model.columns

这意味着 dataFields: any[] = tableColumns: any[] = this.model.columns 两个变量都存储对同一个数组的引用

尝试这个

 dataFields: any[] = this.model.columns
 tableColumns: any[] = [...this.model.columns] // Spread operator creates a new array and assings it to tableColumns

在这里阅读更多

推荐阅读