Nauka Angular'a: problem z wyświetlaniem zmiennej na stronie

0

Witam wszystkich.

Na wstępie chciałbym zaznaczyć że jestem początkującym jeśli chodzi o programowanie. W ramach samokształcenia się postanowiłem nauczyć się trochę Angular'a. Podstawy podstaw przyswoiłem i postanowiłem zacząć robić coś praktycznego. Natrafiłem na problem z wyświetlaniem zmiennej na stronie w momencie gdy coś się z nią działo w kodzie.

Idę o zakład że po prostu jeszcze jakiegoś mechanizmu nie znam, coś źle zrozumiałem lub kompletnie inaczej powinienem to zrobić. Stąd moje problemy. Niestety ale po omacku szukając, nie znalazłem rozwiązania. Dlatego wrzucę poniżej kod i jeśli byście mogli, nakierujcie mnie, jaki "rozdział" z brakującej mi wiedzy powinienem zgłębić aby rozwiązać mój problem, byłbym bardzo wdzięczny.

Krótki opis:
mam pole w którym chcę wprowadzać liczbę definiującą pożądaną wielkość tablicy (domyślnie 10). Do tego przycisk którym tworzę tablicę o zadanej wielkości i wypełniam wartościami od 1 do max długości. No i pola w którym chcę wyświetlić tablicę i oddzielne pole by zobaczyć (dla pewności) nadany rozmiar tablicy.

HTML:

  <ul>    
<!--pole w którym definiuje wielkość tablicy-->
    <li><input type="text" name="range"  [(ngModel)]="tableSize"></li>
<!--przycisk wywołujący metodę która ma stworzyć tablicę o podanym wcześniej rozmiarze i ją wypełnić wartościami-->
    <li><button type="button" (click)="initialDataTableContent()">Generate</button></li>   
<!--miejsce w którym chcę zobaczyć gotową tablicę-->
  <li><p>{{dataTable}}</p></li>   
<!--miejsce w którym chcę zobaczyć aktualny rozmiar tablicy-->
 <li><p>{{tableSize}}</p></li>
</ul>

Java:

export class ControlPanelComponent implements OnInit {

  public tableSize: number;
  public dataTable: number[];

  constructor() {
    this.tableSize = 10;
    this.dataTable = [];
  }

 //  tutaj zmieniam wartość pożądanej wielkości tablicy na jakąś daną przez użytkownika
  setDataTableSize(event) {
    this.tableSize = event.target.value;
  }

// metoda która wypełnia tablicę "dataTable" do zadanej długości kolejnymi liczbami
  initialDataTableContent() {
    this.dataTable.length = 0;
    let i: number;
    for (i = 0; i < this.tableSize; i++) {
      this.dataTable.push(i + 1);
    }
    this.dataTableChanged.emit(this.dataTable);
    console.log(this.dataTable);
return this.dataTable;
  }

// tutaj wypełniam tablicę przy inicjalizacji, aby nie była pusta
  ngOnInit() {
    this.initialDataTableContent();
  }
}

Opis problemu:
Na stronie, widzę cały czas odświeżająca się wartość daną przez użytkownika, super, tak ma być.
Po przyciśnięciu guzika, wywoływana jest metoda która wypełnia tablicę i wyświetla ją w konsoli, działa jak powinno, tablica ma różne rozmiary zależnie od wartości w polu.
Na stronie, cały czas widzę tę samą zawartość tabeli, nic się nie zmienia. Nie fajnie, sądziłem ze może zadziałać jak wyświetlanie wartości tablicy z pola. Myliłem się.

Pomysły jak powinienem podejść do tego problemu?

0

Znalazłem odpowiedź, sam push do tablicy nie sprawi że aplikacja odkryje że coś się zmieniło, wystarczyło dopisać jedną linijkę do initialDataTableContent(). Teraz wygląda tak i działa:

initialDataTableContent() {
    this.dataTable.length = 0;
    let i: number;
    for (i = 0; i < this.tableSize; i++) {
      this.dataTable.push(i + 1);
    }
//--------nowa linijka--------
    this.dataTable = this.dataTable.slice();

    this.dataTableChanged.emit(this.dataTable);
    console.log(this.dataTable);
  }

Ale i tak pozostaje pytanie, a może dało by się to zrobić ładniej?

1 użytkowników online, w tym zalogowanych: 0, gości: 1