Question

我在运行代码时在控制台上收到以下错误。仅供参考，在进行一些小改动之前，代码运行正常。需要你的帮助来解决这个问题：

未处理的承诺拒绝：无法加载 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>

Answer 1

删除相应的.js和.js.map文件并为解决方案提供新版本有助于解决此问题

未处理的承诺拒绝：无法加载archived-solution-list.component.html

1 个答案: