每当我将新数据传递给子组件时，ngx-pagination就会中断

Question

我正在使用ngx-pagination软件包进行大列表的分页。 我正在子组件模板的内部使用分页管道。

无论何时子组件收到新的数据分页控件，都会失效，并且将无法正常工作。

但是，如果我重新启动应用程序，它将正常运行。只有当我请求新数据并将其作为输入属性传递给子组件时，分页才会中断。

我弄错了分页控件组件的属性。我也尝试过将总项目设置在分页管道中。我还尝试设置分页控件ID，并将其传递到分页管道中。 但是以上尝试根本没有用。

请在下面找到子代码。

component.ts

export class AgentUserConvComponent implements OnChanges {

  @Input() chatData: Conversation[] = [];
  @Input() searchText: string;
  @Input() country: string;
  @Output() sendIds = new EventEmitter<MessagesToBeReviewed[]>();
  listLoading = true;
  msgsToBeReviewed: MessagesToBeReviewed[] = [];
  messages: Array<Message> = [];
  user = this.cookieService.getCookie('email').split('@')[0].length > 0 ? this.cookieService.getCookie('email').split('@')[0] : 'vijay.rm';

  constructor(private socketService: SocketService, private cookieService: CookieService) {}

  ngOnChanges() {

  }

  getConverse(chat: Conversation) {
    this.messages = chat.conversation;
    this.socketService.getRealtimeUsers();
  }

  updateMsgIds(id: number, user: string) {
    this.msgsToBeReviewed = [...this.msgsToBeReviewed, {id, user}];
    console.log('messagesToBeReviewed', this.msgsToBeReviewed);
  }
  checkInReviewMsgs(id: number, user: string) {
    return this.msgsToBeReviewed.filter(msg => msg.id === id).length > 0;
  }
  reviewIds(chat: Conversation) {
    this.sendIds.emit(this.msgsToBeReviewed);
    this.msgsToBeReviewed = [];
    this.socketService.userClosedConversation();
  }

  reviewAll(chat: Conversation) {
    const ids = chat.getMsgIdsAll();
    console.log('messageId for review all', ids);
    this.sendIds.emit(ids);
    this.msgsToBeReviewed = [];
    this.socketService.userClosedConversation();
  }

  afterExpand(chat: Conversation) {
    // tslint:disable-next-line: max-line-length
    this.socketService.userOpenedConversation({mlUser: this.user, user: chat.user, ids: chat.getMsgIdsAll().map(msg => msg.id), country: this.country});
  }
}

component.html

<h1 *ngIf="chatData.length === 0">No Conversations Yet</h1>
<mat-accordion *ngIf="chatData.length > 0">
  <mat-expansion-panel
    (closed)="reviewIds(chat)"
    (opened)="getConverse(chat)"
    (afterExpand)="afterExpand(chat)"
    *ngFor="
      let chat of chatData
        | search: searchText
        | paginate: { itemsPerPage: 15, currentPage: p, id: 'paginate' }
    "
  >
    <mat-expansion-panel-header>
      <mat-panel-title>
        <div class="title-style">
          <h4>{{ chat.user }}</h4>
          <span class="occupy-empty-space"></span>
          <div class="active-users">
            <ng-container
              *ngIf="!chat.reviewed && chat.getReviewers().length > 0"
            >
              <div *ngFor="let reviewer of chat.getReviewers()">
                <div class="circle-dot-user" [matTooltip]="reviewer">
                  <span
                    >{{ reviewer.split(".")[0][0].toUpperCase()
                    }}{{ reviewer.split(".")[1][0].toUpperCase() }}</span
                  >
                </div>
              </div>
            </ng-container>
          </div>
        </div>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <mat-divider></mat-divider>

    <main
      class="msger-chat"
      *ngFor="let message of messages"
      class="expansion-class"
    >
      <div class="msg left-msg" *ngIf="message.req.length > 0">
        <div
          class="msg-img"
          style="background-image: url('static/distML/assets/image/user.svg')"
        ></div>
        <div class="msg-bubble">
          <div class="msg-info">
            <div class="msg-info-name">{{ message.id }}</div>
            <div class="msg-info-time">
              {{ message.time | date: "dd/MMM/yyyy, HH:mm a" }}
            </div>
          </div>
          <div class="msg-text">
            {{ message.req }}
          </div>
        </div>
      </div>

      <div class="msg right-msg" *ngIf="message.res">
        <div
          class="msg-img"
          style="background-image: url('static/distML/assets/image/favicon.512x512.png'); background-size: 55px 55px;"
        ></div>
        <div
          class="msg-bubble"
          [ngClass]="{
            'msg-bubble-default': !checkInReviewMsgs(message.msgId, message.id),
            'msg-bubble-addedToReview': checkInReviewMsgs(
              message.msgId,
              message.id
            ),
            'msg-bubble-reviewed': message.IsReviewed
          }"
        >
          <div class="msg-info">
            <div class="msg-info-name">Bot</div>
            <div class="msg-info-time">
              {{ message.time | date: "dd/MMM/yyyy, HH:mm a" }}
              <span
                *ngIf="
                  message.priority === null || message.priority.length <= 0
                "
                class="circleDot"
                >0</span
              >
              <span *ngIf="message.priority != null" class="circleDot">{{
                message.priority
              }}</span>
            </div>
          </div>
          <div
            class="msg-text"
            [innerHTML]="message.res | bypassSanitization: 'html'"
          >
            {{ message.res }}
          </div>
          <div class="msg-info-name" style="margin-top: 5px">
            <button
              *ngIf="!message.IsReviewed"
              mat-flat-button
              class="add-to-review"
              (click)="updateMsgIds(message.msgId, message.id)"
            >
              <div class="button-style">
                <p>
                  {{
                    checkInReviewMsgs(message.msgId, message.id)
                      ? "Added to Review"
                      : "Add to Review"
                  }}
                </p>
                <span class="occupy-empty-space"></span>
                <div class="active-users">
                  <ng-container *ngIf="message.reviewers.length > 0">
                    <div *ngFor="let reviewer of message.reviewers">
                      <div
                        class="circle-dot-user-button"
                        [matTooltip]="reviewer"
                      >
                        <span
                          >{{ reviewer.split(".")[0][0].toUpperCase()
                          }}{{ reviewer.split(".")[1][0].toUpperCase() }}</span
                        >
                      </div>
                    </div>
                  </ng-container>
                </div>
              </div>
            </button>
            <mat-chip-list *ngIf="message.IsReviewed">
              <mat-chip
                color="primary"
                selected
                [matTooltip]="message.ReviewedBy.split('@')[0]"
              >
                Reviewed by
                {{
                  message.ReviewedBy.split(".")[0][0].toUpperCase() +
                    message.ReviewedBy.split(".")[1][0].toUpperCase()
                }}
              </mat-chip>
            </mat-chip-list>
          </div>
        </div>
      </div>
    </main>
    <div class="msg-overflow"></div>
    <mat-action-row *ngIf="!chat.reviewed">
      <button mat-button color="accent" (click)="reviewAll(chat)">
        Review All
      </button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>

<pagination-controls
  id="paginate"
  autoHide="true"
  responsive="true"
  (pageChange)="p = $event"
  class="pageControls"
  *ngIf="chatData.length > 0"
></pagination-controls>

当将新数据传递给子组件时，分页控制组件应像初始化应用程序时一样正常工作。

Answer 1

我能够解决问题。就我而言，我两次重用了子组件。 我在子组件内部使用了分页控件。但是这里的问题是分页控件是我使用子组件时的同一实例。分页控件组件使用它接收到的最后一个数据对UI进行审核。 例： 我有一个可重用的组件。我在两个选项卡中两次使用了这个可重用组件。 每当我将数据传递到此可重用组件时，最后收到的数据都会在我使用可重用组件的所有位置上更新分页控件组件。请检查我实现的解决方案。

<h1 *ngIf="chatData.length === 0">No Conversations Yet</h1>
<mat-accordion *ngIf="chatData.length > 0">
  <mat-expansion-panel
    (closed)="reviewIds(chat)"
    (opened)="getConverse(chat)"
    (afterExpand)="afterExpand(chat)"
    *ngFor="
      let chat of chatData
        | search: searchText
        | paginate: { itemsPerPage: 15, currentPage: isYetToBeReviewed ? p1 : p2, id: isYetToBeReviewed ? 'paginate1' : 'paginate2' }
    "
  >
    <mat-expansion-panel-header>
      <mat-panel-title>
        <div class="title-style">
          <h4>{{ chat.user }}</h4>
          <span class="occupy-empty-space"></span>
          <div class="active-users">
            <ng-container
              *ngIf="!chat.reviewed && chat.getReviewers().length > 0"
            >
              <div *ngFor="let reviewer of chat.getReviewers()">
                <div class="circle-dot-user" [matTooltip]="reviewer">
                  <span
                    >{{ reviewer.split(".")[0][0].toUpperCase()
                    }}{{ reviewer.split(".")[1][0].toUpperCase() }}</span
                  >
                </div>
              </div>
            </ng-container>
          </div>
        </div>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <mat-divider></mat-divider>

    <main
      class="msger-chat"
      *ngFor="let message of messages"
      class="expansion-class"
    >
      <div class="msg left-msg" *ngIf="message.req.length > 0">
        <div
          class="msg-img"
          style="background-image: url('static/distML/assets/image/user.svg')"
        ></div>
        <div class="msg-bubble">
          <div class="msg-info">
            <div class="msg-info-name">{{ message.id }}</div>
            <div class="msg-info-time">
              {{ message.time | date: "dd/MMM/yyyy, HH:mm a" }}
            </div>
          </div>
          <div class="msg-text">
            {{ message.req }}
          </div>
        </div>
      </div>

      <div class="msg right-msg" *ngIf="message.res">
        <div
          class="msg-img"
          style="background-image: url('static/distML/assets/image/favicon.512x512.png'); background-size: 55px 55px;"
        ></div>
        <div
          class="msg-bubble"
          [ngClass]="{
            'msg-bubble-default': !checkInReviewMsgs(message.msgId, message.id),
            'msg-bubble-addedToReview': checkInReviewMsgs(
              message.msgId,
              message.id
            ),
            'msg-bubble-reviewed': message.IsReviewed
          }"
        >
          <div class="msg-info">
            <div class="msg-info-name">Bot</div>
            <div class="msg-info-time">
              {{ message.time | date: "dd/MMM/yyyy, HH:mm a" }}
              <span
                *ngIf="
                  message.priority === null || message.priority.length <= 0
                "
                class="circleDot"
                >0</span
              >
              <span *ngIf="message.priority != null" class="circleDot">{{
                message.priority
              }}</span>
            </div>
          </div>
          <div
            class="msg-text"
            [innerHTML]="message.res | bypassSanitization: 'html'"
          >
            {{ message.res }}
          </div>
          <div class="msg-info-name" style="margin-top: 5px">
            <button
              *ngIf="!message.IsReviewed"
              mat-flat-button
              class="add-to-review"
              (click)="updateMsgIds(message.msgId, message.id)"
            >
              <div class="button-style">
                <p>
                  {{
                    checkInReviewMsgs(message.msgId, message.id)
                      ? "Added to Review"
                      : "Add to Review"
                  }}
                </p>
                <span class="occupy-empty-space"></span>
                <div class="active-users">
                  <ng-container *ngIf="message.reviewers.length > 0">
                    <div *ngFor="let reviewer of message.reviewers">
                      <div
                        class="circle-dot-user-button"
                        [matTooltip]="reviewer"
                      >
                        <span
                          >{{ reviewer.split(".")[0][0].toUpperCase()
                          }}{{ reviewer.split(".")[1][0].toUpperCase() }}</span
                        >
                      </div>
                    </div>
                  </ng-container>
                </div>
              </div>
            </button>
            <mat-chip-list *ngIf="message.IsReviewed">
              <mat-chip
                color="primary"
                selected
                [matTooltip]="message.ReviewedBy.split('@')[0]"
              >
                Reviewed by
                {{
                  message.ReviewedBy.split(".")[0][0].toUpperCase() +
                    message.ReviewedBy.split(".")[1][0].toUpperCase()
                }}
              </mat-chip>
            </mat-chip-list>
          </div>
        </div>
      </div>
    </main>
    <div class="msg-overflow"></div>
    <mat-action-row *ngIf="!chat.reviewed">
      <button mat-button color="accent" (click)="reviewAll(chat)">
        Review All
      </button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>

<div *ngIf="chatData.length > 0">
  <pagination-controls
  id="paginate1"
  autoHide="true"
  responsive="true"
  (pageChange)="p1 = $event"
  class="pageControls"
  *ngIf="isYetToBeReviewed"
></pagination-controls>
</div>
<div *ngIf="chatData.length > 0">
  <pagination-controls
  id="paginate2"
  autoHide="true"
  responsive="true"
  (pageChange)="p2 = $event"
  class="pageControls"
  *ngIf="!isYetToBeReviewed"
></pagination-controls>
</div>