試圖讓數組的一個副本，然後將其與數組比較，看它是否改變

-1

在我的角度節目，我有一個表，只要你點擊某一行上，它進入一個不同的組件，row-edit.component，行被轉換爲輸入框，以便您可以編輯數據並傳遞所選行的編號。我希望能夠製作表格中顯示的數組副本，以便如果某人更改了他們不想表達的內容，他們只需點擊一個取消按鈕，它就會將該行重置爲原來的狀態。我怎樣才能製作一個數組的副本？ - 我還以爲是我工作過，但是當它顯示在控制檯上，我剛開始undefined試圖讓數組的一個副本，然後將其與數組比較，看它是否改變

這裏是我的陣列型號：

public class PTOData 
 
    { 
 
    [Key] 
 
    public int ID { get; set; } 
 
    public int EmpKey { get; set; } 
 
    public string type { get; set; } 
 
    public DateTime date { get; set; } 
 
    public string fullhalf { get; set; } 
 
    public int hours { get; set; } 
 
    public string scheduled { get; set; } 
 
    public string notes { get; set; } 
 
    public bool inPR { get; set; } 
 
    public DateTime? prDate { get; set; } 
 
    } 
 

 
    }

這裏是那裏的主要函數被調用我的.html：

<button class="btn btn-default btn-primary btn-sm" (click)="resetRow(pto)"><i class="fa fa-ban" aria-hidden="true"></i></button>

，這裏是我的.ts文件的相關部分，console.log(this.origPTO);只是這樣我就可以看到發生了什麼打印出來，目前，我在控制檯

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

 
import { PTOData } from './pto-data'; 
 
import { PTODataService } from './pto-data.service'; 
 
import { EmpInfo } from './emp-info'; 
 
import { EmpInfoService } from './emp-info.service'; 
 

 
@Component({ 
 
    selector: '[pto-row-edit]', 
 
    templateUrl: `./row-edit.component.html`, 
 
    styleUrls: ['./row-edit.component.css'] 
 
}) 
 

 
export class RowEditComponent { 
 

 
    // Inputs & Outputs to/from grid component 
 
    @Input() pto: PTOData[]; 
 
    @Input() rowSelected: number; 
 

 
    @Output() onDelete = new EventEmitter<number>(); 
 
    @Output() onSave = new EventEmitter<number>(); 
 

 
    origPTO: PTOData[] = this.pto; 
 

 
    constructor(
 
     private ptodataService: PTODataService, 
 
     private empInfoService: EmpInfoService) { } 
 

 
    resetRow(pto: PTOData): void { 
 
     console.log(this.origPTO); 
 
     this.rowSelected = null; 
 
     this.onSave.emit(this.rowSelected); 
 
    } 
 
}

來源

2017-07-06 asdf

https://stackoverflow.com/questions/34688517/how-can-i-use-angular：到pto任何更改也將到origPTO.您應該遍歷原始數組做一個深拷貝製作-copy-in-angular-2 – HaveSpacesuit

@HaveSpacesuit我不能設置一個等於數組的變量嗎？在做'const copy = {this.pto};'的時候，我在''中得到一個錯誤提示「''：'」expected.'「或者做'const copy = this.pto;'，I 「」一個類成員不能有'const'關鍵字。「＃： – asdf

我沒有看太深入你的代碼，但如果你設置一個變量等於數組，你實際上是創建一個對它的引用。所以如果你改變了數組，那麼新的變量將會發生變化，所以你將無法恢復。在AngularJS中，你可以使用'angular.copy'來創建一個深層副本，這就是我將要研究的內容。 – HaveSpacesuit

越來越undefined你的賦值語句origPTO: PTOData[] = this.pto;發生在@Input()發生以前。相反，把分配的OnInit生命週期掛鉤：

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

export class RowEditComponent implements OnInit { 

    @Input() pto: PTOData[]; 
    origPTO: PTOData[]; 

    ngOnInit(): void { 
     this.origPTO = this.pto; 
    } 
}

這仍然不是你想要的，因爲它不是做一個深拷貝。

this.origPTO = []; 
this.pto.forEach(x => this.origPTO.push(x));

來源

2017-07-06 18:19:15 HaveSpacesuit

感謝！但是，每當我這樣做，在通過'ngOnInit（）'函數循環該數組，我在控制檯中得到一個錯誤，說'this.pto.forEach不是一個函數' – asdf

你可能需要做一些調試，並確保你傳遞輸入內容。 – HaveSpacesuit

再次想到，它看起來像你的'PTOData'是一個對象，而不是一個數組。所以，你應該聲明'@Input（）pto：PTOData;'和'origPTO：PTOData;'。然後嘗試在'ngOnInit'中設置'this.origPTO = this.pto'並且不要迭代任何東西。 – HaveSpacesuit

試圖讓數組的一個副本，然後將其與數組比較，看它是否改變

回答

相關問題