Nicht forEach (func) auf array'ish Objekt

Question

kann ich forEach im Allgemeinen verwenden, aber heute traf ich eine Stelle, die mich verwirrt. Ich habe es gegooglet, aber nichts bekommen, was ich nicht schon wusste.

Ich beginne mit TypeScript wegen Angular und ich habe eine Reihe von Steuerelementen aus dem DOM zugegriffen. Dann wähle ich einen von ihnen und komme zu seinen Kindern.

@ViewChildren("marker") markers: QueryList<ElementRef>; 

this.markers.forEach(item => { 
    let element = item.nativeElement; 

    //item.children.forEach(child => {child.classList.add("poof"); }); 
    for (let child of element.children) 
    child.classList.add("poof"); 
}); 

Nach der Konsole, es sieht aus wie ein Array, da es eine Liste mit Klammern ist (obwohl typeof mir sagt, es ist ein Objekt).

Ich bin verwirrt darüber und neugierig darüber, warum der auskommentierte Code nicht funktioniert. Nicht sicher, wofür man googeln soll.

Answer 1

forEach ist eine Methode eines Arrays. Mit TypeScript können Sie nur Methoden aufrufen, die für diesen Typ verfügbar sind.

Wenn der Typ QueryList <> kein Array ist, sondern ein Objekt, das zur Laufzeit dasselbe Verhalten wie ein Array hat, weiß TS nichts davon.

Sie können entweder die for..of Schleife verwenden oder wenn Sie mit forEach bleiben möchten, können Sie QueryList<> extends Array<T> machen.

Answer 2

Die Methode forEach gehört zum Array-Prototyp (siehe here), daher kann sie nur für Variablen vom Typ Array verwendet werden.

Der QueryList-Typ implementiert die Iterable-Schnittstelle (gemäß Angular Docs here), daher ermöglicht es das Schleifen mit for ... of.

Was die Google Chrome-Konsole (oder ein anderer Browser) druckt, unterscheidet sich von dem, was das Objekt tatsächlich ist.

Answer 3

müssen Sie warten, bis markers in der Ansicht wiedergegeben werden:

@ViewChildren("marker") markers: QueryList<ElementRef>; 

ngAfterViewInit() { 
    this.markers.forEach(item => { 
    let element = item.nativeElement; 

    //item.children.forEach(child => {child.classList.add("poof"); }); 
    for (let child of element.children) 
     child.classList.add("poof"); 
    }); 
}