Jak radzić sobie z wejściami asynchronicznymi w komponentach?

Question

Mam problem z ngOnChange. Mam następujący komponent:

@Component({ 
    selector:'user-table', 
    template: `...`, 

}) 

export class UserTable implements OnChanges{ 
    @Input() users: User[]; 
    years:string[]; 
    constructor(private _usersCollection:UsersCollection){ 
    } 

    ngOnChanges(){ 
    if (this.users.length) 
     {this.years =this._usersCollection.createYearsArray(this.users)} 
    } 
} 

Jednakże, jeśli warunek zostanie sprawdzone tylko raz - gdy this.users nie jest jeszcze pobierany z serwera, a tym samym jego długość wynosi 0. W jaki sposób mogę znaleźć rozwiązanie do czynienia z tego rodzaju async wejścia?

Tablica jest aktualizowany, a kiedy ustawić następujące dzienniki:

console.log('ON FIRST INIT' , this.programs); 
    this.years = this._usersCollection.createYearsArray(); 
    console.log(this.years); 
    setInterval(()=>{ 
     console.log('IN INTERVVAL' , this.programs); 
    },1000); 

Wyjście konsola jest:

ON FIRST INIT [] 
UsersTable.component.ts:21 [] 
UsersTable.component.ts:23 IN INTERVVAL [Object, Object, Object, Object] 

Answer 1

Jeśli nie musisz wykonywać żadnej logiki, gdy zmienia się właściwość wejściowa (np. Korzystasz tylko z właściwości w powiązaniach szablonów), nie musisz nic robić. Angular automatycznie będzie propagować nowe wartości z rodzica do właściwości wejściowej.

Jeśli chcesz wykonać logikę komponentu, gdy właściwość wejściowa ulegnie zmianie, użyj ngOnChanges(), która jest wywoływana za każdym razem, gdy zmieni się właściwość wejściowa komponentu.

Ponieważ kątowa wykorzystuje === do wykrywania zmian (no, istnieje jakiś specjalny sposób postępowania dla NaN też), oznacza to, że

• dla typów referencyjnych (array, obiekt, data, itp), odniesienia (tj , odwołanie do tablicy, obiektu itp.) musi się zmienić. Np., myArray = someNewArray;
  Jeśli zmienia się tylko element w tablicy, ngOnChanges() nie jest wywoływane. Np. W przypadku zmiany takiej jak myArray[0].name = newName;, ngOnChanges() nie jest wywoływana.
• dla typów pierwotnych (liczba, boolean, string), oznacza to po prostu, że wartość musi się zmienić. E.g, myNumber = 5; lub myNumber = newNumber;

---

Inną opcją jest zaimplementować własną logikę wykrywania zmian używając ngDoCheck(). Zobacz przykład this answer. Ten hak cyklu życia jest nazywany "za każdym razem, gdy sprawdzane są właściwości wejściowe komponentu lub dyrektywy, użyj go, aby rozszerzyć wykrywanie zmian, wykonując niestandardową kontrolę" - od lifecyle hooks.md

Answer 2

ngOnChanges() jest wywoływana gdy users są aktualizowane. Trzeba tylko upewnić się, że nowa tablica jest przypisana users w składniku macierzystym, zamiast wypełniać istniejącą tablicę. W przeciwnym razie wykrywanie zmiany Angulars nie rozpozna zmiany.