Я использую пакет ngx-pagination для нумерации большого списка. Я использую канал разбиения на страницы внутри шаблона дочернего компонента.
Когда дочерний компонент получает новые элементы управления Data pagination, он сломается и не будет работать.
, но если я перезапущу приложение, оноработает правильно Разбиение на страницы разбивается только тогда, когда я запрашиваю новые данные и передаю их дочернему компоненту в качестве входного свойства.
Я испортил свойства компонента элементов управления разбиением на страницы. Я также попытался установить общее количество элементов в paginate pipe. Я также попытался установить управление пагинацией для идентификатора и передать его в трубу для пагинации. Но вышеупомянутые попытки не работали вообще.
Найдите дочерний код ниже.
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 control должен работать должным образом, как он работал при инициализации приложения.