Question

我正在尝试仅重新加载用户单击按钮时首次加载到页面上的数据。我知道如何刷新页面，但我找不到任何好的文档，我正在尝试做什么。有人可以请我转到正确的地方吗？这是我点击刷新图标时刷新页面的代码。看看glyphicon刷新，这是我可以刷新页面但我应该在用户删除行后加载数据，我无法解释它，但我甚至尝试做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的建议，您需要创建列表的备份副本。为此，您可以使用lodash的cloneDeep（）方法。在这篇SO帖子之后，了解如何在项目中导入lodash。 Importing lodash into angular2 + typescript application

根据上述SO帖子，如果您的项目中包含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，然后在单击刷新按钮时从该复制中恢复数组。

如何将数据恢复为与加载时初始化的数据相同

2 个答案: