Router and canActivate类不起作用。未找到指令

Question

运行应用程序时出现以下错误：错误：（SystemJS）找不到指令注释。由于ref在按钮1上的路由不起作用，因为其他地方的按钮在起作用，因为我正在用ng-click处理。在这两种情况下，第一个按钮为何不起作用以及它将如何起作用以及涟漪效应消失了。]

------------------------------------------------ --------------------------------------

geo-are-comp-html

<div class="container-fluid" style="margin-bottom: 150px;">
    <div class="col-12 px-0">
        <h5 class="d-inline-block header-text">Geographic Area</h5>
    </div>
    <div class="row mx-0" *ngIf="message">

        <div
        [class.alert-success]="successOrFailure == true"
        [class.alert-danger]="successOrFailure == false"
        class="col-12 col-md-12 col-lg-12 alert"
    >
        <button type="button" class="close" data-dismiss="alert" (click)="clearPopup()">
            &times;
        </button>
        <h5 class="d-inline-block">{{ message }}</h5>
    </div>

    </div>
    <div style="background-color: whitesmoke;" class="p-3 border">
        <form novalidate [formGroup]="myGroup">
            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <div class="form-group mx-0 row">
                        <label for="geoType" class="col-xs-5 col-sm-5 col-form-label p-0"
                            >Geographic Type
                            <strong class="text-danger">*</strong>
                        </label>
                        <div class="col-xs-7 col-sm-7 px-0">
                            <kendo-combobox
                                [data]="UniqueType"
                                class="form-control"
                                formControlName="geoType"
                                id="type"
                                #type
                                (valueChange)="areaDropdownValues(type.value, 'geoType')"
                            >
                                <br />
                            </kendo-combobox>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-lg-3">
                    <div class="form-group mx-0 row">
                        <label for="recordYear" class="col-xs-5 col-sm-5 col-form-label p-0"
                            >Record Year
                            <strong class="text-danger">*</strong>
                        </label>
                        <div class="col-xs-7 col-sm-7 px-0">
                            <kendo-combobox
                                [data]="UniqueRecordYear"
                                class="form-control"
                                formControlName="recordYear"
                                id="year"
                                #year
                                (valueChange)="areaDropdownValues(year.value, 'year')"
                            >
                            </kendo-combobox>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-lg-5">
                    <div class="form-group mx-0 row">
                        <label
                            for="geoCategoryName"
                            class="col-xs-5 col-sm-5 col-lg-6 text-xs-left col-form-label p-0 text-lg-center"
                            >Geographic Category Name
                            <strong class="text-danger">*</strong>
                        </label>
                        <div class="col-xs-7 col-sm-7 col-lg-6 px-0">
                            <kendo-combobox
                                [data]="UniqueName"
                                class="form-control"
                                formControlName="geoCategoryName"
                                id="name"
                                #name
                                (valueChange)="areaDropdownValues(name.value, 'catname')"
                            >
                            </kendo-combobox>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- Grid -->
    <div class="row mt-3 mx-0" *ngIf="!areaForm">
        <!-- <app-common-grid
            [(mySelection)]="mySelection"
            [isAsync]="false"
            [gridState]="gridState"
            [gridOption]="gridOption"
            selectField = "areaCode"
            [dialogOpened]="dialogOpened"
            [gridData]="geoAreaGridData"
            (onStateChange)="onStateChange($event)"
            (addHandler)="addHandler($event)"
            (editHandler)="editHandler($event)"
            (removeHandler)="removeHandler($event)"
            (manageDialog)="manageDialog()"
            (showCategoryForm)="showCategoryForm($event)"
            (editGetDataFn)="editGetDataFn()"
            (confirmDialog)="confirmDialog($event)"
        ></app-common-grid> -->
        <app-common-grid
        [title]="'Geographic Area'"
        [isAsync]="false"
        [(mySelection)]="mySelection"
        [gridState]="gridState"
        [gridOption]="gridOption"
        [dialogOpened]="dialogOpened"
        [gridData]="geoAreaGridData"
        selectField="areaCode"
        (onStateChange)="onStateChange($event)"
        (addHandler)="addHandler()"
        (editHandler)="editHandler($event)"
        (removeHandler)="removeHandler($event)"
        (manageDialog)="manageDialog()"
        (showCategoryForm)="showCategoryForm($event)"
        (editGetDataFn)="editGetDataFn($event)"
        (confirmDialog)="confirmDialog($event)"
    ></app-common-grid>
    </div>
    <!-- Input form -->
    <div  class="border mt-3" style="margin-bottom: 150px;" *ngIf="areaFormEdit">
        <div>
            <app-dynamic-form
                (saveEvent)="onSaveGeoArea($event)"
                (editEvent)="onEditCategory($event)"
                (cancelEvent)="resetFn()"
                idField ="areaCode"
                title="Geographic Area"
                [(model)]="editAreaData"
                [(formInputs)]="inputs"
            >
            </app-dynamic-form>
        </div>
    </div>

    <!-- <div class="border mt-3" style="margin-bottom: 150px;" [hidden]="areaFormEdit">
        <div class="">
            <h5 class="p-2">{{ editFormOption }} Geographic Area</h5>
        </div>
        <div class="p-2 pt-4 form-container">
            <form novalidate [formGroup]="editForm" (ngSubmit)="submitFn()">
                <div class="row mx-5">
                    <div class="col-12 col-lg-6">
                        <div class="form-group mb-0 row mx-0">
                            <label for="areaCode" class="col-sm-5 col-form-label p-0"
                                >Geographic Area Code <strong class="text-danger">*</strong></label
                            >
                            <div class="col-sm-7">
                                <input
                                    type="text"
                                    [appDisableControl]="editFormOption === 'Edit'"
                                    class="k-textbox form-control"
                                    formControlName="areaCode"
                                />

                                <div
                                    class="k-tooltip k-tooltip-validation"
                                    [hidden]="editForm.controls.areaCode.errors?.pattern"
                                    [style.visibility]="
                                        !editForm.controls.areaCode.value &&
                                        (editForm.controls.areaCode.dirty || editForm.controls.areaCode.touched)
                                            ? 'visible'
                                            : 'hidden'
                                    "
                                >
                                    Area Code is required
                                </div>
                                <div
                                    class="k-tooltip k-tooltip-validation"
                                    [hidden]="!editForm.controls.areaCode.errors?.pattern || !editForm.controls.areaCode.value"
                                >
                                    Comma (,), hyphen (-), underscore(_), spaces() ,dot(.), forward slash (/) , colon(:) and alphanumeric
                                    are allowed
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="form-group mb-0 row mx-0">
                            <label for="areaName" class="col-sm-5 col-form-label p-0"
                                >Geographic Area Name <strong class="text-danger">*</strong></label
                            >
                            <div class="col-sm-7">
                                <input type="text" class="k-textbox form-control" formControlName="areaName" />
                                <div
                                    class="k-tooltip k-tooltip-validation"
                                    [hidden]="
                                        !editForm.controls.areaName.value &&
                                        (editForm.controls.areaName.dirty || editForm.controls.areaName.touched)
                                            ? false
                                            : true
                                    "
                                >
                                    Category Name is required
                                </div>
                                <div
                                    class="k-tooltip k-tooltip-validation"
                                    [hidden]="!editForm.controls.areaName.errors?.pattern || !editForm.controls.areaName.value"
                                >
                                    Comma (,), hyphen (-), underscore(_), spaces() ,dot(.), forward slash (/) , colon(:) and alphanumeric
                                    are allowed
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-lg-6">
                        <div class="form-group mb-0 row mx-0">
                            <label for="recordYear" class="col-sm-5 col-form-label p-0"
                                >Record Year <strong class="text-danger">*</strong></label
                            >
                            <div class="col-sm-7">
                                <kendo-combobox [data]="UniqueRecordYear" class="form-control" formControlName="recordYear">
                                </kendo-combobox>
                                <div
                                    class="k-tooltip k-tooltip-validation"
                                    [style.visibility]="
                                        editForm.controls.recordYear.invalid &&
                                        (editForm.controls.recordYear.dirty || editForm.controls.recordYear.touched)
                                            ? 'visible'
                                            : 'hidden'
                                    "
                                >
                                    Record Year is required
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="form-group mb-0 row mx-0">
                            <label for="mmsaFlag" class="col-sm-5 col-form-label p-0"
                                >MMSA Flag <strong class="text-danger">*</strong></label
                            >
                            <div class="col-sm-7">
                                <input type="checkbox" class="form-control" kendoCheckBox formControlName="mmsaFlag" />
                                <div
                                    class="k-tooltip k-tooltip-validation"
                                    [style.visibility]="
                                        editForm.controls.mmsaFlag.invalid &&
                                        (editForm.controls.mmsaFlag.dirty || editForm.controls.mmsaFlag.touched)
                                            ? 'visible'
                                            : 'hidden'
                                    "
                                >
                                    MMSA Flag is required
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-lg-6">
                        <div class="form-group mb-0 row mx-0">
                            <label for="msaFlag" class="col-sm-5 col-form-label p-0"
                                >Non MMSA Flag <strong class="text-danger">*</strong></label
                            >
                            <div class="col-sm-7">
                                <input type="checkbox" class="form-control" kendoCheckBox formControlName="msaFlag" />
                                <div
                                    class="k-tooltip k-tooltip-validation"
                                    [style.visibility]="
                                        editForm.controls.msaFlag.invalid &&
                                        (editForm.controls.msaFlag.dirty || editForm.controls.msaFlag.touched)
                                            ? 'visible'
                                            : 'hidden'
                                    "
                                >
                                    MMSA Flag is required
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mx-5">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-secondary float-right mr-1" (click)="resetFn()">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-primary float-right mr-1" [disabled]="editForm.invalid">
                            Save
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div> -->
</div>
------------------------------------------------ --------------------------------------

geo-are-comp-ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { GeographicAreaService } from '../../../Services/geographic-area.service';
import { skip } from 'rxjs/operators';
import { Observable, BehaviorSubject } from 'rxjs';
import { GridDataResult, PageChangeEvent, SelectAllCheckboxState } from '@progress/kendo-angular-grid';
import { map, findIndex } from 'rxjs/operators';

// Kendo
import { State, process } from '@progress/kendo-data-query';
import { Category } from '../../../Models/category';
import { Area } from 'src/app/Models/Area';
import { error } from 'util';
import { isNullOrEmptyString } from '@progress/kendo-angular-grid/dist/es2015/utils';
import { format } from 'url';
import { IFormInput } from '../../dynamic-form/dynamic-form/dynamic-form.component';

const CREAT_ACTION = 'create';
const UPDATE_ACTION = 'update';

@Component({
    selector: 'app-geographic-area',
    templateUrl: './geographic-area.component.html',
    styleUrls: ['./geographic-area.component.scss'],
})
export class GeographicAreaComponent extends BehaviorSubject<any[]> implements OnInit {
    public geoAreaGridData: GridDataResult;
    private readonly categoryAreaRegex = '^(?=.*[a-zA-Z0-9_,./: -])[a-zA-Z0-9_,./: -]+$';
    public gridState: State = {
        sort: [],
        skip: 0,
        take: 5,
    };
    private data: any[] = [];
    public selectAllState: SelectAllCheckboxState = 'unchecked';
    public mySelection: string[] = [];
    myGroup: FormGroup;
    editForm: FormGroup;
    loading = false;
    public geoData;
    public geoCatData;
    public geoname;
    public geoAreaData;
    entityData: any[];
    UniqueRecordYear: any[] = [];
    UniqueType: any[] = [];
    UniqueName: any[] = [];
    typeData: any;
    yearData: any;
    nameData: any;
    areaForm = true;
    areaFormEdit = false;
    public editAreaData: Area;
    geoCatCodeSave: string;
    geoCatTypeSave: string;
    geoCatNameSave: string;
    public isNew: boolean;
    editFormOption: string;
    message = '';
    addedMessage = false;
    alertType: any = 'alert-success';
    abc: string;
    areaNameValue: string;
    indexNumber: any;
    selectedRowValues: Area[] = [];
    dialogOpened = false;
    isBulk = true;
    deleteItem = null;
    public gridId = 'areaCode';
    areaSelected: Area = new Area();
    public gridOption = [
        {
            field: 'areaCode',
            title: 'Geographic Area Code',
            width: 150,
        },
        {
            field: 'areaName',
            title: 'Geographic Area Name',
            width: 150,
        },
        {
            field: 'mmsaFlag',
            title: 'MMSA Flag',
            width: 100,
        },
        {
            field: 'msaFlag',
            title: 'Non MMSA Flag',
            width: 100,
        },
    ];

    public inputs: IFormInput[] = [
        {
            inputField: 'areaCode',
            inputLabel: 'Geographic Area Code',
            inputType: 'text',
            validations: [
                {
                    errorMessage: 'Geographic Area Code is required',
                    validator: Validators.required,
                    name: 'required',
                },
                {
                    errorMessage: `Comma (,), hyphen (-), underscore(_), spaces() ,dot(.), forward
                slash (/) , colon(:) and alphanumeric are allowed`,
                    validator: Validators.pattern(this.categoryAreaRegex),
                    name: 'pattern',
                },
            ],
        },
        {
            inputField: 'areaName',
            inputLabel: 'Geographic Area Name',
            inputType: 'text',
            validations: [
                {
                    errorMessage: 'Geographic Area Name is required',
                    validator: Validators.required,
                    name: 'required',
                },
                {
                    errorMessage: `Comma (,), hyphen (-), underscore(_), spaces() ,dot(.), forward
                slash (/) , colon(:) and alphanumeric are allowed`,
                    validator: Validators.pattern(this.categoryAreaRegex),
                    name: 'pattern',
                },
            ],
        },
        {
            inputField: 'recordYear',
            inputLabel: 'Record Year',
            inputType: 'dropdown',
            data: this.UniqueRecordYear,
            validations: [
                {
                    errorMessage: 'Record Year is required',
                    validator: Validators.required,
                    name: 'required',
                },
            ],
        },
        {
            inputField: 'mmsaFlag',
            inputLabel: 'MMSA Flag',
            inputType: 'checkbox',
            validations: [
                {
                    errorMessage: 'MMSA Flag is required',
                    validator: Validators.required,
                    name: 'required',
                },
            ],
        },
        {
            inputField: 'msaFlag',
            inputLabel: 'Non MMSA Flag',
            inputType: 'checkbox',
            // data: this.UniqueRecordYear,
            validations: [
                {
                    errorMessage: 'MSA Flag is required',
                    validator: Validators.required,
                    name: 'required',
                },
            ],
        }
    ];

    constructor(private geographicAreaService: GeographicAreaService) {
        super([]);
    }

    ngOnInit() {
        this.filterResponseForDropDown();
        this.geographicAreaService.read();
        this.initForm();
        this.initForm2();
    }

    filterResponseForDropDown() {
        this.geographicAreaService.getGeoCate().subscribe((data) => {
            this.geoCatData = data;
            for (const item of data) {
                const UniqueRecordYear = this.UniqueRecordYear.indexOf(item.recordYear);
                const UniqueType = this.UniqueType.indexOf(item.geoType);
                const UniqueName = this.UniqueName.indexOf(item.geoCategoryName);
                if (UniqueRecordYear < 0) {
                    this.UniqueRecordYear.push(item.recordYear);
                }
                if (UniqueType < 0) {
                    this.UniqueType.push(item.geoType);
                }
                if (UniqueName < 0) {
                    this.UniqueName.push(item.geoCategoryName);
                }
            }
        });
    }

    initForm(): void {
        this.myGroup = new FormGroup({
            // id: new FormControl(),
            geoCategoryCode: new FormControl('', Validators.required),
            geoCategoryName: new FormControl('', Validators.required),
            geoType: new FormControl('', Validators.required),
            reportingLevel: new FormControl('', Validators.required),
            recordYear: new FormControl('', Validators.compose([Validators.required])),
            entityId: new FormControl('', Validators.required),
        });
    }

    initForm2(): void {
        this.editForm = new FormGroup({
            // id: new FormControl(),
            areaCode: new FormControl('', Validators.required),
            areaName: new FormControl('', Validators.required),
            recordYear: new FormControl('', Validators.compose([Validators.required])),
            msaFlag: new FormControl(false),
            mmsaFlag: new FormControl(false),
            geoCategoryCode: new FormControl(),
            geoType: new FormControl(),
            geoCategoryName: new FormControl(),
        });
    }
    clearPopup() {
        this.message = '';
    }
    manageDialog() {
        this.dialogOpened = !this.dialogOpened;
    }
    confirmDialog(val) {
        val === 'yes' ? this.bulkDelete() : this.manageDialog();
    }
    editHandler({ dataItem }): void {
        console.log(dataItem);
        this.editAreaData = dataItem;
        this.isNew = false;
    }
    addHandler(): void {
        this.editAreaData = new Area();
        // this.areaSelected = new Area();
        this.isNew = true;
    }
    removeHandler({ dataItem }): void {
        this.isBulk = false;
        this.manageDialog();
        console.log('dataItem:', dataItem);
        this.mySelection = dataItem;
        this.deleteItem = dataItem;
    }

    areaDropdownValues(value: any, type: string) {
        if (type === 'geoType') {
            this.typeData = value;
        } else if (type === 'year') {
            this.yearData = value;
        } else if (type === 'catname') {
            this.nameData = value;
        }
        if (this.typeData && this.yearData && this.nameData) {
            console.log('this.myGroup.value::', this.myGroup.value);
            return this.geographicAreaService.getAllArea(this.myGroup.value).subscribe((data) => {
                if (data) {
                    console.log('data::', data.geoCategory);
                    // if (data.geoArea.length !== 0) {
                    if (data.geoArea.length > 0) {
                        this.areaForm = false;
                        // tslint:disable-next-line:max-line-length
                        this.entityData = data.geoArea;
                        console.log('this.entityData:', this.entityData);
                        this.grideData();
                        this.geoData = this.geoCatData.find((item) =>
                            item.geoType === this.typeData &&
                                item.geoCategoryName === this.nameData &&
                                item.recordYear === this.yearData
                                ? item
                                : null
                        );
                        this.geoCatCodeSave = this.geoData ? this.geoData.geoCategoryCode : '';
                        this.geoCatTypeSave = this.geoData ? this.geoData.geoType : '';
                        this.geoCatNameSave = this.geoData ? this.geoData.geoCategoryName : '';
                    } else {
                        console.log('data.geoCategory.geoCategoryName:', data.geoCategory[0].geoCategoryName);
                        this.geoCatNameSave = data.geoCategory[0].geoCategoryName;
                        this.geoCatCodeSave = data.geoCategory[0].geoCategoryCode;
                        this.geoCatTypeSave = data.geoCategory[0].geoType;
                        console.log('this.geoCatNameSave:', this.geoCatNameSave);
                        console.log('this.geoCatCodeSave:', this.geoCatCodeSave);
                        alert('No Data for Area');
                    }
                }
            });
        }
    }
    grideData() {
        this.geoAreaGridData = process(this.entityData, this.gridState);
    }
    scroll(el?: HTMLElement) {
        // el.scrollIntoView();
    }
    showCategoryForm(value: string): void {
        this.areaFormEdit = true;
        this.scroll();
        if (value === 'new') {
            this.editFormOption = 'Add';
        } else {
            this.editFormOption = 'Edit';
        }
        let allData = [];
        this.geographicAreaService.subscribe((x) => {
            allData = x;
        });
    }
    onStateChange(state: State): void {
        this.gridState = state;
        this.grideData();
    }
    resetFn(): void {
        this.initForm2();
        this.editForm.markAsPristine();
        this.editForm.markAsUntouched();
        this.editForm.updateValueAndValidity();
        this.areaFormEdit = false;
    }
    onSaveGeoArea(area) {
        console.log('area::', area);
        if (area.mmsaFlag === true) {
            area.mmsaFlag = 'Y';
        } else if (area.mmsaFlag === null || area.mmsaFlag === false) {
            area.mmsaFlag = 'N';
        }

        if (area.msaFlag === true) {
            area.msaFlag = 'Y';
        } else if (area.msaFlag === null || area.msaFlag === false) {
            area.msaFlag = 'N';
        }
        console.log('this.editFormOption:', this.editFormOption);
        area.categoryName = this.geoCatNameSave;
        area.categoryCode = this.geoCatCodeSave;
        area.geoType = this.geoCatTypeSave
        // area.id = 0;
        this.geographicAreaService.save(area, true).subscribe((response: any) => {
            this.geographicAreaService.getAllArea(this.myGroup.value).subscribe((data) => {
                this.entityData = data.geoArea;
                console.log('this.entityData:', this.entityData);
                this.grideData();
                this.areaFormEdit = false;
                this.mySelection = [];
            });
            this.message = (response.msg || 'Row added');
        });
        // if (this.editFormOption === 'Add') {
        //  this.message = 'Added';
        // subscribe(data => {
        // this.message = geoAreaCode + ' : ' + data.msg;
        // if (data.msg.indexOf('successfully') > 0) {
        //   this.addedMessage = true;
        //   this.alertType = 'alert-danger';
        //   this.updateOrAdd(selectedValue, true);
        // } else {
        //   this.addedMessage = true;
        //   this.alertType = 'alert-danger';
        // }
        // this.initForm2();
        // this.areaFormEdit = true;
        // });
        // } else {
        //  console.log('edit');
        //  this.geographicAreaService.updateArea(this.editForm.value);
        //  // subscribe(response => {
        //  this.message = 'Edited';
        //  // this.message = geoAreaCode + ' : ' + response.msg;
        //  // if (response.msg.indexOf('successfully') > 0) {
        //  //   this.addedMessage = true;
        //  //   this.alertType = 'alert-success';
        //  //   console.log('after updating the record calling updateorAdd method');
        //  //   console.log(selectedValue);
        //  //   this.updateOrAdd(selectedValue, false);
        //  // }
        //  // });
        // }
        // this.initForm2();
    }
    onEditCategory(area) {
        area.categoryName = this.geoCatNameSave;
        area.categoryCode = this.geoCatCodeSave;
        area.geoType = this.geoCatTypeSave
        if (area.mmsaFlag === true) {
            area.mmsaFlag = 'Y';
        } else if (area.mmsaFlag === null || area.mmsaFlag === false) {
            area.mmsaFlag = 'N';
        }

        if (area.msaFlag === true) {
            area.msaFlag = 'Y';
        } else if (area.msaFlag === null || area.msaFlag === false) {
            area.msaFlag = 'N';
        }
        this.geographicAreaService.updateArea(area).subscribe((response: any) => {
            console.log('this.myGroup.value:', this.myGroup.value);
            this.geographicAreaService.getAllArea(this.myGroup.value).subscribe((data) => {
                this.entityData = data.geoArea;
                console.log('this.entityData:', this.entityData);
                this.grideData();
                this.areaFormEdit = false;
                this.mySelection = [];
            });
            this.message = (response.msg || 'Row edited');
        });
    }
    editGetDataFn(): void {
        const data = this.editAreaData;
        if (data.msaFlag === 'Y') {
            this.editForm.controls.msaFlag.setValue(true);
        } else if (data.msaFlag == null || data.msaFlag === 'N') {
            this.editForm.controls.msaFlag.setValue(false);
        }

        console.log('data.mmsaFlag' + data.mmsaFlag);
        if (data.mmsaFlag === 'Y') {
            this.editForm.controls.mmsaFlag.setValue(true);
        } else if (data.mmsaFlag === null || data.mmsaFlag === 'N') {
            this.editForm.controls.mmsaFlag.setValue(false);
        }
        this.showCategoryForm('Edit');

        this.editFormOption = 'Edit';
        this.areaForm = false;
        this.editForm.controls.areaCode.setValue(data.areaCode);
        this.editForm.controls.areaName.setValue(data.areaName);
        this.editForm.controls.recordYear.setValue(data.recordYear);
        this.editForm.controls.recordYear.setValue(data.recordYear);
        this.editForm.controls.geoCategoryCode.setValue(this.geoCatCodeSave);
        this.editForm.controls.geoType.setValue(this.geoCatTypeSave);
        this.editForm.controls.recordYear.setValue(this.geoCatNameSave);
        this.areaNameValue = data.areaName;
        this.editAreaData = this.editForm.value;
        this.editAreaData.recordYear = data.recordYear;
    }
    updateOrAdd(data: Area, isNew?: boolean) {
        const action = isNew ? CREAT_ACTION : UPDATE_ACTION;
        if (action === 'create') {
            this.entityData.unshift(data);
            this.grideData();
        } else {
            const index = this.entityData.findIndex((x) => x.areaCode === data.areaCode && x.recordYear === data.recordYear);
            this.entityData[index] = data;
            this.grideData();
        }
        return super.next(this.data);
    }
    remove(data: any) {
        const index = this.entityData.findIndex((x) => x.areaCode === data.areaCode && x.recordYear === data.recordYear);
        this.entityData.splice(index, 1);
        this.grideData();
        return super.next(this.data);
    }
    bulkDelete(): void {
        this.manageDialog();
        console.log('this.mySelection:', this.mySelection);
        console.log('this.entityData:', this.entityData);
        const areaToDelete: Area[] = this.entityData.filter((c: Area) =>
            this.mySelection.includes(c.areaCode)
        );
        console.log('deleton list', areaToDelete);
        this.geographicAreaService.bulkDeleteRecord(areaToDelete).subscribe((response) => this.afterDelete(response));
    }
    private afterDelete(response: any) {
        this.geographicAreaService.getAllArea(this.myGroup.value);
        this.mySelection = [];
        this.message = (response.msg || 'row(s) removed');
    }

    bulkDeleteGrid(selectedData) {
        console.log('selectedData' + selectedData);
        for (const value of selectedData) {
            const index = this.entityData.findIndex(
                (x) => x.areaCode === value.areaCode && x.recordYear === value.recordYear
            );
            this.entityData.splice(index, 1);
            this.grideData();
        }
        return super.next(this.data);
    }
}
------------------------------------------------ --------------------------------------

运行应用程序时出现以下错误：错误：（SystemJS）找不到指令注释。 ref上的按钮1路由不起作用，因为ref与其他按钮在起作用，因为我正在处理...