angular 8 array change in console but not in view

Question

Hello community i'm new to angular and i'm trying to make a pagination component with logic, at this point i'm successfully getting the correct array in the console but in the view it is not changing.

i'm able to move through pages correctly only the pagination component itself is not changing. pagination view

the console i get when i navigate through the pages:

pagination.component.ts:25 (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
pagination.component.ts:25 (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
pagination.component.ts:25 (10) [3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
pagination.component.ts:25 (10) [4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
pagination.component.ts:25 (10) [4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

this is the function in the service that create the array that show correctly on console but not in the view.

initialPagination(totalPages: number) {
    this.pagination = [];
    this.numberOfPages = totalPages
    if (this.numberOfPages <= 10) {
      // less than 10 total pages so show all
      this.startPage = 1;
      this.endPage = this.numberOfPages;
    } else {
      // more than 10 total pages so calculate start and end pages
      if (this.pageToShow <= 6) {
        this.startPage = 1;
        this.endPage = 10;
      } else if (this.pageToShow + 4 >= this.numberOfPages) {
        this.startPage = this.numberOfPages - 9;
        this.endPage = this.numberOfPages;
      } else {
        this.startPage = this.pageToShow - 5;
        this.endPage = this.pageToShow + 4;
      }
    }

    // create an array of pages to ng-repeat in the pager control
    for (let i = this.startPage; i < this.endPage + 1; i++) {
      this.pagination.push(i)
    }
    return this.pagination
}

over here is the component itself

<ul class="pagination">
<li (click)="replacePage(pagination.pageToShow - 1)"><a>&laquo;</a></li>
<li (click)="replacePage(i)" [ngClass]="{active:pagination.pageToShow === i}"
    *ngFor="let page of pager; let i = index"><a>{{i + 1}}</a></li>
<li (click)="replacePage(pagination.pageToShow + 1)"><a>&raquo;</a></li>

and here is the initialization of the pagination:

  replacePage(page: number) {
    if (page >= 0) {
      if (page < this.numberOfPages) {
        this.pagination.pageToShow = page;
        this.pager = this.pagination.initialPagination(this.numberOfPages)
        console.log(this.pager)
      }
    }
  }

why iis the view not update but console is?

This is quite unclear. Please post all the relevant code, and tell precisely what you're doing, what you expect to happen expected output, in the view on in the console), and the actual output (in the view and in the console). Stackblitz is your friend. — JB Nizet
– JB Nizet, Commented Aug 15, 2019 at 12:21

JB Nizet · Accepted Answer · 2019-08-15 12:35:49Z

1

The view loops through the elements of pager, and displays the index of each element. And whenever you click, you change the elements of pager, but pager is still an array of 10 elements, with indices thus still going from 0 to 9.

You need to display the elements of the array, rather than its indices.

answered Aug 15, 2019 at 12:35

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Idan Peled Over a year ago

thank you so much. i will notice those thing better next time

Collectives™ on Stack Overflow

angular 8 array change in console but not in view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related