Javascript 在表列表中保存编辑项时出现错误

我有营销“活动”的申请

还有一个用户可以编辑的所有活动的表

编辑活动并单击“保存”后，在活动表中显示该活动的副本

刷新页面后，重复的活动将消失

这意味着有重复的活动，但不保存在数据库中，只保存在刷新页面后消失的表（列表）中

预期结果：在保存编辑活动时，不应出现重复的活动

有人知道问题出在哪里吗

下面是列表组件的typescript文件：

export class NanoCampaignListComponent implements OnChanges {

@Input() advertiserId: string;
@Input() advertiserIoId: string;
@Input() insertionOrderTargeting: string;

// public advertiserId: string;
// public advertiserIoId: string;
public campaignListDto: CampaignListDto;
public campaignListDtoData: CampaignListDtoData;
public columnsArray = TABLE_COLUMNS;

private subscription: Subscription;

constructor(private campaignModel: CampaignModel,
            private modalModel: ModalModel,
            private activatedRoute: ActivatedRoute) {
    // this.subscribeToRouteParamsChange();
}

public ngOnChanges(): void {
    this.getListDto();
    this.getListDtoData();
}

public getCampaignModel(): CampaignModel {
    return this.campaignModel;
}

// public ngOnDestroy() {
//     this.subscription.unsubscribe();
// }

public openModal(id: string): void {
    const data = {
            id: id,
            advertiserId: this.advertiserId,
            insertionOrderId: this.advertiserIoId,
            insertionOrderTargeting: this.insertionOrderTargeting
        };
    this.modalModel.add(CampaignModel.ENTITY_NAME, data);
}

private getListDto(): void {
    this.campaignListDto = this.campaignModel.getListDto(this.advertiserIoId);
    // this.campaignListDto = this.campaignModel.getListDto(this.advertiserId);
}

private getListDtoData(): void {
    this.campaignModel
        .getListDtoData(this.campaignListDto)
        .catch(error => console.log(error))
}

以下是表的初始列表组件.html：

<div class="nano-f nano-f-c">

<div class="nano-f-40 nano-f-r">
    <nano-add-new-button class="nano-bc-yellow hover-effect" (click)="openModal('new')">
    </nano-add-new-button>
</div>

<nano-table *ngIf="campaignListDto.isLoaded === true"
            [@fadeIn]="'in'"
            [tableList]="campaignListDto.list"
            [columnsArray]="columnsArray"
            [pageCount]="5"
            [sortField]="'impressions'"
            [sortInverse]="true">
    <ng-template let-campaignListDtoData="item">
        <div class="nano-table-entity-name-cell">
            <span [tooltip]="campaignListDtoData.name"
                  [routerLink]="['/private/advertiser/' + advertiserId + + '/advertiserIo/' + advertiserIoId +'/campaign/' + campaignListDtoData.id]"
                  class="nano-c-p">
                {{ campaignListDtoData.name }}
            </span>
            <span>
                {{ campaignListDtoData.id }}
            </span>
        </div>

        <div class="nano-table-number-cell">
            <span>
                {{ campaignListDtoData.revenue | number:'.2-2' }}
            </span>
        </div>
        <div class="nano-table-number-cell">
            <span>
                {{ campaignListDtoData.cost | number:'.2-2' }}
            </span>
        </div>
        <div class="nano-table-number-cell">
            <span>
                {{ campaignListDtoData.impressions | number }}
            </span>
        </div>
        <div class="nano-table-number-cell">
            <span>
                {{ campaignListDtoData.clicks | number }}
            </span>
        </div>
        <div class="nano-table-number-cell">
            <span>
                {{ campaignListDtoData.CTR | number }}
            </span>
        </div>
        <div class="nano-table-number-cell">
            <span>
                {{ campaignListDtoData.conversions | number }}
            </span>
        </div>
        <div class="nano-table-actions-cell">
            <span class="btn-tables-default"
                  (click)="openModal(campaignListDtoData.id)">
                <i class="fa fa-external-link"></i>
            </span>
            <nano-entity-toggle-button #entityToggleButton>
            </nano-entity-toggle-button>

            <nano-campaign-duplicate [campaignId]="campaignListDtoData.id">
            </nano-campaign-duplicate>

            <!--<nano-entity-duplicate-button [entityId]="campaignListDtoData.id"-->
                                          <!--[entityModel]="getCampaignModel()">-->
            <!--</nano-entity-duplicate-button>-->
            <nano-entity-delete-button [entityId]="campaignListDtoData.id"
                                       [entityName]="campaignListDtoData.name"
                                       [entityParentId]="advertiserIoId"
                                       [entityModel]="getCampaignModel()">
            </nano-entity-delete-button>
        </div>
        <div class="nano-table-number-cell">
            <span>
                <i class="fa fa-circle"
                   [class.nano-c-green]="campaignListDtoData.status === 1"
                   [class.nano-c-red]="campaignListDtoData.status === 2"></i>
            </span>
        </div>
        <nano-campaign-edit *ngIf="entityToggleButton.isOpen"
                            [campaignId]="campaignListDtoData.id"
                            [advertiserId]="advertiserId"
                            [advertiserIoId]="advertiserIoId"
                            [insertionOrderTargeting]="insertionOrderTargeting"
                            class="nano-table-preview-cell">
        </nano-campaign-edit>
    </ng-template>
</nano-table>

<div *ngIf="campaignListDto.isLoaded === true"
     class="nano-f-30 nano-f-r">
    <span class="nano-m-a5">
        Statistics are for last 7 days.
    </span>
</div>

<nano-loading-indicator *ngIf="campaignListDto.isLoaded === false"
                        [@flyIn]="'in'">
</nano-loading-indicator>

nano campaing编辑模板：（代码的一小部分）

nano-table.ts，下面是代码的一部分，对于这种情况可能很重要：

export class NanoTableComponent {

  @ContentChild(TemplateRef) template: TemplateRef<any>;

  @Input() columnsArray: Array<NanoTableHeader> = [];
  @Input() isAsync: boolean = false;
  @Input() nanoTable: NanoTable;
  @Input() pageCount: number = 10;
  @Input() pageCountOptions: Array<number> = [5, 10, 20];
  @Input() sortField: string | null = null;
  @Input() sortInverse: boolean = false;
  @Input() useQueryParams: boolean = true;
  @Input() hasExport: boolean = false;


  @Input()
  public set tableList(value: Array<any>) {
      this._tableList = value;
      this.onTableListChange();
  }

  public get tableList(): Array<any> {
      return this._tableList;
  }

  private _tableList: Array<any> = [];

  constructor(private router: Router,
              private activatedRoute: ActivatedRoute) {
  }
}

导出类NanoTableComponent{
@ContentChild（TemplateRef）模板：TemplateRef；
@Input（）columnsArray:Array=[]；
@Input（）isAsync:boolean=false；
@Input（）纳米表：纳米表；
@Input（）页面计数：number=10；
@Input（）pageCountOptions:Array=[5,10,20]；
@Input（）排序字段：字符串| null=null；
@Input（）sortInverse:boolean=false；
@Input（）useQueryParams:boolean=true；
@Input（）hasExport:boolean=false；
@输入（）
公共集合表格列表（值：数组）{
此参数为.\u tableList=值；
这个.onTableListChange（）；
}
public get tableList（）：数组{
返回此。\u tableList；
}
私有_tableList:Array=[]；
构造函数（专用路由器：路由器、，
专用activatedRoute:activatedRoute）{
}
}

纳米表模板：

<div *ngIf="tableList.length > 0"
 class="nano-table-grid nano-mt-5">

<div class="nano-f-r">
    <input type="text" [(ngModel)]="searchWord" class="nano-white-smoke-input" placeholder="Search"/>
    <button *ngIf="hasExport === true && isExportInProgress === false"
            type="button"
            class="nano-f-250 nano-white-smoke-button nano-ml-2"
            (click)="exportReport()">
        <span>
            CSV
        </span>
    </button>
    <nano-loading-indicator *ngIf="isExportInProgress === true"
                            class="nano-loading-bar-small nano-loading-bar-overlay nano-f-250 "
                            style="margin-left: 2px"></nano-loading-indicator>
</div>

<div class="nano-table-row nano-table-grid-header">
    <div class="{{column.columnClass}}"
         *ngFor="let column of columnsArray"
         [ngClass]="{'sort-active':sortField === column.columnField}"
         (click)="onSortFieldChange(column.columnField)">
        <span>
            {{column.columnName}}
        </span>
        <i class="fa"
           [class.fa-sort-asc]="sortInverse === true && sortField === column.columnField"
           [class.fa-sort-desc]="sortInverse === false && sortField === column.columnField">
        </i>
    </div>
</div>

<div class="nano-f-c nano-table-row-wrapper"
     *ngFor="let item of getFilteredList()">
    <div class="nano-table-row">
        <ng-template [ngTemplateOutlet]="template"
                     [ngOutletContext]="{item: item}">
        </ng-template>
    </div>
</div>

<nano-table-footer [pageNumber]="pageNumber"
                   [pageCount]="pageCount"
                   [pageCountOptions]="pageCountOptions"
                   [length]="getLengthForFooter()"
                   (onPageNumberChange)="onPageNumberChange($event)"
                   (onPageCountChange)="onPageCountChange($event)">
</nano-table-footer>

CSV
{{column.columnName}

---

请注意，我看到您发出了一个名为“活动IDChange”的事件，但我没有看到您在任何地方使用它。可能没有，我只是不想留下代码，因为它什么都不做。当然，我只能看到您提供的代码。为了提供更多帮助，需要查看表本身的组件代码，以了解它如何处理某些事情。如果是第三方的话，也可以链接到它的来源包。太棒了，你能为初始组件添加代码吗？该表正在读取该文件中的值，希望查看它们是如何设置/更改的。我仍然只看到该组件的html，我正在查找ts文件。不用担心。我现在想到的是oncampaingsave（）函数。我会在代码库中搜索“ActivitydChange”，并查看该事件的相关信息。此外，除了查看deliveryLimitationConflictCheck的名称之外，我不知道它（在同一个函数中）做了什么。可能没有引起问题，但我也希望看到它，以确认它没有对表进行任何更改（我再次怀疑它是否有）

export class NanoTableComponent {

  @ContentChild(TemplateRef) template: TemplateRef<any>;

  @Input() columnsArray: Array<NanoTableHeader> = [];
  @Input() isAsync: boolean = false;
  @Input() nanoTable: NanoTable;
  @Input() pageCount: number = 10;
  @Input() pageCountOptions: Array<number> = [5, 10, 20];
  @Input() sortField: string | null = null;
  @Input() sortInverse: boolean = false;
  @Input() useQueryParams: boolean = true;
  @Input() hasExport: boolean = false;


  @Input()
  public set tableList(value: Array<any>) {
      this._tableList = value;
      this.onTableListChange();
  }

  public get tableList(): Array<any> {
      return this._tableList;
  }

  private _tableList: Array<any> = [];

  constructor(private router: Router,
              private activatedRoute: ActivatedRoute) {
  }
}

<div *ngIf="tableList.length > 0"
 class="nano-table-grid nano-mt-5">

<div class="nano-f-r">
    <input type="text" [(ngModel)]="searchWord" class="nano-white-smoke-input" placeholder="Search"/>
    <button *ngIf="hasExport === true && isExportInProgress === false"
            type="button"
            class="nano-f-250 nano-white-smoke-button nano-ml-2"
            (click)="exportReport()">
        <span>
            CSV
        </span>
    </button>
    <nano-loading-indicator *ngIf="isExportInProgress === true"
                            class="nano-loading-bar-small nano-loading-bar-overlay nano-f-250 "
                            style="margin-left: 2px"></nano-loading-indicator>
</div>

<div class="nano-table-row nano-table-grid-header">
    <div class="{{column.columnClass}}"
         *ngFor="let column of columnsArray"
         [ngClass]="{'sort-active':sortField === column.columnField}"
         (click)="onSortFieldChange(column.columnField)">
        <span>
            {{column.columnName}}
        </span>
        <i class="fa"
           [class.fa-sort-asc]="sortInverse === true && sortField === column.columnField"
           [class.fa-sort-desc]="sortInverse === false && sortField === column.columnField">
        </i>
    </div>
</div>

<div class="nano-f-c nano-table-row-wrapper"
     *ngFor="let item of getFilteredList()">
    <div class="nano-table-row">
        <ng-template [ngTemplateOutlet]="template"
                     [ngOutletContext]="{item: item}">
        </ng-template>
    </div>
</div>

<nano-table-footer [pageNumber]="pageNumber"
                   [pageCount]="pageCount"
                   [pageCountOptions]="pageCountOptions"
                   [length]="getLengthForFooter()"
                   (onPageNumberChange)="onPageNumberChange($event)"
                   (onPageCountChange)="onPageCountChange($event)">
</nano-table-footer>