Cześć, temat dotyczy angulara.
Mam w widoku komponenta pętlę *ngFor, która wypełnia elementy grida bootstrapowego. Teraz kwestia jest tego typu, ze elementy te załadowane są w pliku ts do tablicy, a zawartość tej tablicy może się zmieniać - elementy mogą do niej dochodzic, bądź ubywać z niej. Chciałbym w jakiś sposób odświeżać grida po zmianie zawartości tablicy. Próbowałem markForCheck(), ale nie zadziałało. Jakieś sugestie jak by to można dobrze zrobić?
- Rejestracja:prawie 6 lat
- Ostatnio:ponad 3 lata
- Postów:141
0
Angular 
- Rejestracja:prawie 7 lat
- Ostatnio:około 3 lata
- Postów:78
0
Poczytaj o https://angular.io/api/core/OnChanges
kamilos95
Tylko to sie wydaje być jakimś potencjalnym rozwiązaniem, kiedy do czynienia mamy z komponentami parent-child. A w moim przypadku wszystko jest w jednym komponencie.
Krzysztof Pe
https://stackblitz.com/edit/angular-2hnndg
Gdzie to robisz? Wrzuć może ten kod na stackblitz? Elementy są załadowane w pliku ts do tablicy - pokaż ten plik. Pokaż w jaki sposób te elementy są przekazywane do componentu.
kamilos95
Nic się nie ładuje pod tym linkiem.
Krzysztof Pe
Spróbuj teraz, zrobiłem update linku
- Rejestracja:prawie 14 lat
- Ostatnio:około miesiąc
- Postów:151
- Rejestracja:prawie 7 lat
- Ostatnio:około 3 lata
- Postów:78
0
To jest co najmniej dziwne, bo u mnie działa normalnie. https://stackblitz.com/edit/angular-2hnndg?embed=1&file=src/app/app.component.html
- Rejestracja:prawie 6 lat
- Ostatnio:ponad 3 lata
- Postów:141
0
Nowe elementy dochodzą do tablicy jeżeli mi coś przyjdzie w .subscribe - może to ma jakieś znaczenie?
Co tam masz w tej tablicy? Czy to nie są jakieś typy proste?
- Rejestracja:prawie 6 lat
- Ostatnio:ponad 3 lata
- Postów:141
0
marcin82w napisał(a):
Jeśli iterujesz w ngFor bezpośrednio po elementach tablicy do której dodajesz dane to nie. A w konsoli nie masz błędów ?
Faktycznie, był błąd, nie zauważyłem go. Poprawiłem i działa. Mam jeszcze jedno pytanie - bo w sumie problem jest taki, że ten *ngFor w widoku na początku życia komponentu nie ma danych i sypie błędami. Jak by można było poczekać na te wyniki, które przyjdą z subscribe'a?
Async pipe albo użyj ng-container z IFem
- Rejestracja:prawie 6 lat
- Ostatnio:ponad 3 lata
- Postów:141
0
marcin82w napisał(a):
A jak dodajesz elementy do tablicy ? Async pipe nie możesz użyć ?
W komponencie mam tablice items = new Array<Item>(); i później w ngOnInit mam .subscribe, gdzie po otrzymaniu danych robię this.items.push(dana_ktora_przyszla). Nie stosowałem prędzej async pipe- nie wiem czy się nada w tym przypadku? Bo próbowałem w ngFor dodać "| async", ale zarzuciło błędami.
- Rejestracja:prawie 6 lat
- Ostatnio:ponad 3 lata
- Postów:141
0
marcin82w napisał(a):
Dodaj, tylko nie rób subscribe w ngOnInit. Async pipie zadba o resztę.
No tylko, że ten mój subscribe, który zbiera dane umieściłem w ngOnInit i wygląda mniej więcej tak:
public ngOnInit(): void {
this.subscription = this.dTService.initialized.subscribe((change: DSChange) => {
change.added.forEach((item: Item) => {
this.items.push(item);
});
change.changed.forEach((item: Item) => {
this.items.push(item);
});
});
}
Więc teraz pytanie co z tym zrobić, skoro mówisz, żeby nie robić subsribe w ngOnInit?
- Rejestracja:prawie 14 lat
- Ostatnio:około miesiąc
- Postów:151
0
A to tego nie zrobisz poprzez async pipe. Rozumiem że w ngFor iterujesz po items. W konstruktorze próbowałeś inicjować poprzez
this.items = []
?
edytowany 4x, ostatnio: marcin82w
Zobacz pozostałe 5 komentarzy
jeśli items będzie pustą tablicą (zero elementów) to po porstu nie będzie iterował, nie powinno być błędów. Czy na pewno w tym masz błąd ?
Tzn. fakt, że po dodaniu this.items = [] w konstruktorze błędów nie ma w konsoli, jednak pojawia się problem tego rodzaju, że na widoku nie pojawiają się żadne elementy. A jak sądzę w ngOnInit one z jakimś tam poślizgiem są w końcu ładowane.
ngOnInit jest wykonywany jeszcze przed renderowaniem widoku, jeśli zasubskrybujesz i dane przyjdą to w widoku powinny być widoczne, masz pewność że subscribe dobrze działa ? To this.items = [] ngOnInit na samym początku.
Tzn sytuacja wygląda tak, że jak z menu przechodzę do komponentu to na widoku nie ma nic, pusto. Natomiast jak już jestem w danym komponencie i wymuszę w przeglądarce przeładowanie, to wtedy po odświezeniu wyglada ok
A czy w momencie przechodzenia do komponentu masz się do czego zasubskrybować ? Wykonujesz zapytanie http i do odpowiedzi z niego subskrybujesz się ?
- Rejestracja:prawie 5 lat
- Ostatnio:ponad 4 lata
- Lokalizacja:świat
- Postów:174
0
Wszystko rób przez async pipe. Poczytaj o deklaratywnym podejściu w angularze. Ogólnie chodzi o to, że masz w pipie tak przekształcić dane, że jak walniesz subscribe(np async pipem) to dane są gotowe, to ma wiele zalet, m.in można użyć ChangeDetection.ON_PUSH ale także nie trzeba samemu robić unsubscribe
To dobre posunięcie, jednak w backend trzeba trochę zmodyfikować to co będzie zwracane.