每当我将新数据传递给子组件时，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>

当新数据传递给子组件时，paginate 控制组件应该正常工作，因为它在应用程序初始化时工作。

Answer 1

我能够解决这个问题。在我的例子中，我重复使用了子组件两次。我在子组件中使用了分页控件。但这里的问题是分页控件与我使用子组件的实例相同。分页控制组件使用它收到的最后数据更新 UI。例子：我有一个可重用的组件。我在两个选项卡中两次使用这个可重用组件。每当我将数据传递给这个可重用组件时，接收到的数据最后会在我使用可重用组件的所有地方更新分页控制组件 component.Please 检查我实施的解决方案。

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

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

ngx-pagination broke whenever I am passing new data to child component

angular

ngx-pagination