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?