我在运行代码时在控制台上收到以下错误。仅供参考，在进行一些小改动之前，代码运行正常。需要你的帮助来解决这个问题：
未处理的承诺拒绝：无法加载 archived-solution-list.component.html;区域：;任务： Promise.then;值：无法加载 archived-solution-list.component.html undefined consoleError @ vendor.js：66621
我在下面添加了必要的文件：
存档溶液-list.component.ts：
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { SolutionMetadata, SolutionHistory } from '../../models/solution.models';
import { SolutionHistoryComponent } from './subcomponents/solution-history.component';
import { ArcGridComponent } from '../../components/shared/util/arc-grid.component';
import { GridComponent } from '../../components/shared/util/grid.component';
import { ModalComponent } from '../../components/shared/util/modal.component';
import { UserRoleService } from "../../services/userRole.service";
import { SolutionManagementService } from '../../services/solutionManagement.service';
import { ArchivedSolutionService } from '../../services/archivedSolution.service';
//import { SolutionService } from '../../services/solution.service';
import { ToasterNotificationService } from '../../services/toasternotification.service';
import { AuthHttp } from 'ng2-adal/core';
@Component({
selector: 'archived-solution-list',
templateUrl: './archived-solution-list.component.html',
styleUrls: ['../shared/util/arc-grid.component.css',
'../shared/util/form-sharedstyle.css',
'./archived-solution-list.component.css']
})
export class ArchivedSolutionListComponent extends ArcGridComponent {
solutions: SolutionMetadata[];
isAdmin: boolean = false;
showAll: boolean = false;
busy: boolean = false;
userName: string;
solutionHistories: SolutionHistory[];
solutionToRestore: SolutionMetadata;
solutionHistoryName: string;
isRetrieveArchivedClicked: boolean = false;
@ViewChild('restoreModal') restoreModal: ModalComponent;
//@ViewChild('archivedSolutionsModal') archivedSolutionsModal: ModalComponent;
constructor(private _archivedSolutionService: ArchivedSolutionService,
private _router: Router,
private _activatedRoute: ActivatedRoute,
private _solutionManagementService: SolutionManagementService,
private _userRoleService: UserRoleService,
private toasterService: ToasterNotificationService,
authHttp: AuthHttp) {
super(false, authHttp);
}
ngOnInit() {
super.ngOnInit();
this.initArcDataTable();
this._solutionManagementService.ClearAll();
this._archivedSolutionService.Solutions.subscribe(data => {
this.busy = false;
this.solutions = data;
this.updateRows2(this.showAll ? data : data.filter(it => it.owner == this.userName || it.authorizedUsers.indexOf(this.userName) >= 0));
});
this.userName = this._userRoleService.getUserName();
//this.isAdmin = true;
this.isAdmin = this._userRoleService.isInRole(this._userRoleService.roles.AdminRole);
if (this.isAdmin) {
this._archivedSolutionService.getAllArchivedSolutionSummaries().subscribe(
() => { }, // handled in Solutions subscription callback
(error: any) => {
this.toasterService.Notify("Error", "An error occured while retrieving the archived solutions.");
this.table2.messages.emptyMessage = "No records."
});
}
else {
this._archivedSolutionService.getArchivedSolutionSummaries().subscribe(
() => { }, // handled in Solutions subscription callback
(error: any) => {
this.toasterService.Notify("Error", "An error occured while retrieving the archived solutions.");
this.table2.messages.emptyMessage = "No records."
});
}
}
restoreSolution() {
if (this.solutionToRestore) {
this.restoreModal.hide();
this._archivedSolutionService.restoreSolution(this.solutionToRestore.id).subscribe(
() => { },
(error: any) => {
this.toasterService.Notify("error", "An error occured while restoring the solution.");
});
}
}
showRestoreConfirmation(solutionSummary: SolutionMetadata) {
this.solutionToRestore = solutionSummary;
this.restoreModal.show();
}
toggleShowAll() {
this.showAll = !this.showAll;
if (this.showAll && this.solutions) {
this.updateRows2(this.solutions);
}
else if (this.solutions) {
this.updateRows2(this.solutions.filter(it => it.owner == this.userName || it.authorizedUsers.indexOf(this.userName) >= 0));
}
}
initArcDataTable() {
this.columns2 = [
{
name: 'Solution',
prop: 'name',
sortable: true,
sortString: '',
flexGrow: 2,
cellTemplate: this.customColumnTemplate2,
headerTemplate: this.sortableColumnTemplate2
},
{
name: 'Description',
prop: 'description',
sortable: true,
sortString: '',
flexGrow: 3,
headerTemplate: this.sortableColumnTemplate2
},
{
name: 'Solution Owner',
prop: 'owner',
sortable: true,
sortString: '',
flexGrow: 2,
headerTemplate: this.sortableColumnTemplate2
},
{
name: '# RGs',
prop: 'resourceGroupCount',
sortable: true,
sortString: '',
flexGrow: .7,
headerTemplate: this.sortableColumnTemplate2
},
{
name: 'Version',
prop: 'version',
sortable: true,
sortString: '',
flexGrow: 1,
headerTemplate: this.sortableColumnTemplate2
},
{
name: 'Action',
cellTemplate: this.actionRowTemplate2,
sortable: false,
flexGrow: 2
}
];
}
}
存档溶液-list.component.html：
<div class="row">
<div class="col-sm-9 pageTitle">Archived Solutions</div>
<div [hidden]="!busy" class="col-sm-3"><span class="glyphicon glyphicon-refresh glyphicon-spin" style="float:right;"></span></div>
</div>
<div>
<button class="btn btn-default" (click)="_router.navigate(['/solutions']);" id="createButton">Active Solutions</button>
<label *ngIf="isAdmin" style="padding-right:2px;">Show All:</label><input *ngIf="isAdmin" type="checkbox" [checked]="showAll" (change)="toggleShowAll()" />
</div>
<ngx-datatable #table2
class='datatable'
[sortType]="'single'"
[columns]="columns2"
[columnMode]="'flex'"
[headerHeight]="40"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="10"
[rows]='rows2'>
<template #sortableColumnTemplate2 let-sort="sortFn" let-column="column" ngx-datatable-header-template>
<span (click)="sort()" class="sort-fullwidth">{{column?.name}}</span>
<input class="filter-box" placeholder='' (keyup)='updateFilter2($event)' />
</template>
<template #actionRowTemplate2 let-row="row" let-value="value" ngx-datatable-cell-template>
<div style="display:block; text-align:center;">
<a title="restore" (click)="showRestoreConfirmation(row)" id="restore-{{row.$$index}}"><i class="glyphicon glyphicon-refresh"></i></a>
</div>
</template>
<template #customColumnTemplate2 let-row="row" let-value="value" ngx-datatable-cell-template>
<div style="display:block; text-align:left;">
{{row.name}}
</div>
</template>
</ngx-datatable>
<modal #restoreModal>
<div class="app-modal-header" style="border:none;">
</div>
<div class="app-modal-body">
Confirm restoration of <span style="font-weight:bold;">{{solutionToRestore?.name}}</span> and it's associated project.
</div>
<div class="app-modal-footer">
<button type="button" class="btn btn-default" (click)="restoreModal.hide()" id="cancelRestoreButton">Cancel</button>
<button type="button" class="btn btn-danger" (click)="restoreSolution()" id="confirmRestoreButton">Confirm</button>
</div>
</modal>
答案 0 :(得分：0)
删除相应的.js和.js.map文件并为解决方案提供新版本有助于解决此问题