您如何还原数据与加载时初始化的数据相同

Question

我试图仅重新加载用户单击按钮时首先加载在页面上的数据。我知道如何刷新页面，但找不到任何好的文档，可以解决我要做的事情。有人可以将我重定向到正确的地方吗？这是我有刷新图标时刷新页面的代码。无法很好地解释它，但我什至尝试执行window.location.reload((，但这不是将数据加载回页面的正确方法。

谢谢

component.html

<h1 class="padding-left">Bid Types</h1>
<hr />
<div>
    <ul class="flex-container-bid-header">
        <li><strong><span>ID</span></strong></li>
        <li><strong><span>BidTypes</span></strong></li>
        <li><strong><span>Status</span></strong></li>
        <li><strong><span>#Bid Periods</span></strong></li>
        <li><strong><span>Last Import</span></strong></li>
        <li><a href="/bidtypes" class="glyphicon glyphicon-refresh"></a></li>
    </ul>
</div>

component.ts

import {Component} from "@angular/core";
import {Bidtype, BidTypeStatus} from "../../models/bidtype";
import {bidPeriods} from "../../models/bidperiod";
@Component({
    selector: "bidtypes",
    templateUrl: "./bidtypes.component.html",
    styleUrls: ["./bidtypes.component.css"]
})
export class BidTypesComponent {
    bidtypes: Bidtype[] = [
        {
            id: 1,
            fleet: "73G",
            seat: "CPT",
            domicile: "ANC",
            bidPeriods: [{
                id: 1,
                month: "May",
                year: "2018",
                importedOn: new Date(2018, 4, 1, 0, 0, 0, 0)
            }],
            status: BidTypeStatus.Current,
            lastImportedOn: "1/4/2018 5:45 PM"
        },
        {
            id: 2,
            fleet: "73G",
            seat: "CPT",
            domicile: "ANC",
            bidPeriods: [{
                id: 2,
                month: "May",
                year: "2018",
                importedOn: new Date(2017, 4, 1, 0, 0, 0, 0)
            }, {
                id: 3,
                month: "June",
                year: "2018",
                importedOn: new Date(2017, 5, 1, 0, 0, 0, 0)
            }],
            status: BidTypeStatus.Current,
            lastImportedOn: "1/4/2018 5:48 PM"
        },
        {
            id: 3,
            fleet: "73G",
            seat: "CPT",
            domicile: "ANC",
            bidPeriods: [{
                id: 4,
                month: "May",
                year: "2018",
                importedOn: "5/1/2017"
            }],
            status: BidTypeStatus.Current,
            lastImportedOn: "3/4/2018 6:04 PM"
        },
    ];
    importbtnclicked(bidtype: Bidtype, newClass: string) {
        var currentDate = new Date();
        var dateString = currentDate.toLocaleDateString([], {hour: '2-digit', minute: '2-digit'});
        setTimeout(() => {
            newClass = "";
            bidtype.lastImportedOn = dateString;
            bidtype.status = BidTypeStatus.Current;
        }, 10000);
        bidtype.status = BidTypeStatus.Import;
        newClass = BidTypeStatus.Import;
    }
    deleteItem(bidtype: Bidtype) {
        this.bidtypes.splice(this.bidtypes.indexOf(bidtype), 1)
    }
}

Answer 1

正如尼古拉斯·史密斯(Nicholas Smith(所建议的那样，您需要创建列表的备份副本。在此操作中，您可以使用clonedeep((lodash方法。在此之后，帖子以了解如何在项目中导入Lodash。将lodash导入Angular2 Typescript应用程序。

一旦您将lodash包含在项目中并根据上述发布在组件中导入，则可以在构造函数或oninit方法中创建bidtypes列表的副本。

bidTypesCopy: Bidtype[];
ngOnInit() {
  this.bidTypesCopy = _.cloneDeep(this.bidtypes);
 }

单击"刷新"按钮，您可以将此值还原为原始列表。

this.bidtypes = _.cloneDeep(this.bidTypesCopy);

更多关于Lodash Clonedeep的信息：https：//lodash.com/docs/4.17.5#clonedeep

Answer 2

一种方法是在开始时进行bidtypes的副本，并在单击该重新刷新按钮时从该副本中恢复数组。