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

我申请了营销“活动”。

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

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

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

这意味着 有重复的活动没有保存在数据库中,只有在刷新页面后消失的表(列表)中。

预期结果:在保存编辑活动时,不应出现重复的活动。

有人知道问题出在哪里吗?

下面是列表组件的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活动编辑公司:

export class NanoCampaignEditComponent implements OnInit {

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

@Output() campaignIdChange = new EventEmitter();

@ViewChild('mappingComponent') mappingComponent: NanoMappingComponent;

public campaignDto: CampaignDto;
public entityName = CampaignModel.ENTITY_NAME;

constructor(public campaignModel: CampaignModel) {
}

public ngOnInit(): void {
    this.getDto();
    this.getDtoData();
}

public onCampaignSave(): void {
    this.campaignIdChange.emit(this.campaignDto.id);
    this.campaignModel.deliveryLimitationConflictCheck(this.campaignDto.id);
}

// retrive campaign which is clicked to be edited
private getDto(): void {
    this.campaignDto = this.campaignModel.getDto(this.campaignId, this.advertiserId, this.advertiserIoId);
}

// retrive all data of campaign which is clicked to be edited
private getDtoData(): void {
    this.campaignModel
        .getDtoData(this.campaignDto)
        .catch(error => console.log(error))
}

nano campaing编辑模板:(代码的一小部分)

<nano-entity-footer [entityDto]="campaignDto"
                    [entityModel]="campaignModel"
                    [parentForm]="campaignForm"
                    (onEntityDtoSave)="onCampaignSave()">
</nano-entity-footer>

纳米桌子。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) {
  }
}

纳米表模板:

<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>