indexOf ist keine Funktion - Angular 2/Typescript

Question

Verkratzen meinen Kopf über diese ...

Ich habe eine Funktion namens Filterprodukte, die in meinem Angular 2-Komponenten jederzeit aufgerufen wird ein Benutzer klickt auf ein Kontrollkästchen. Momentan findet die Methode alle Kontrollkästchen, die mit einem bestimmten Klassennamen überprüft werden, ihre Werte abrufen und dann versuchen, ein Array zu sortieren. Ziemlich einfach ...

// Called when any checkbox is checked or unchecked 

filterProducts() { 

// Grab all "Program" checkboxes that are checked 
var programsToInclude = $(".programCheckbox:checkbox:checked").map(function() { return this.value; }); 

// If any "Program" checkboxes are checked, filter the list accordingly 
if (programsToInclude) 
    this.filteredProducts = this.filteredProducts.filter(x => programsToInclude.indexOf(x.programName) > -1); 
} 

Warum erhalte ich den folgenden Fehler?

ORIGINAL EXCEPTION: TypeError: programsToInclude.indexOf is not a function 

programsToInclude ist definitiv ein String-Array, das diese Funktion haben sollte, nein?

Answer 1

programsToInclude ist kein Array, es ist ein jQuery-Objekt. jQuery-Objekte haben viele Array-Methoden, aber nicht alle.

Um ein Array zu erhalten, nachdem jQuery#map verwenden, müssen Sie am Ende ein .get() tack:

var programsToInclude = $(".programCheckbox:checkbox:checked").map(function() { return this.value; }).get(); 
// ---------------------------------------------------------------------------------------------------^^^^ 
if (programsToInclude) { // <== This check is pointless, see below the fold for why 
    this.filteredProducts = this.filteredProducts.filter(x => a.indexOf(x.programName) > -1); 
} 

Alternativ verwenden get früh eine native Array zu erhalten, die Ihren filter Anruf Anpassung erfordert:

var programsToInclude = $(".programCheckbox:checkbox:checked").get().map(function(e) { return e.value; }); 
// -----------------------------------------------------------------^^^^----------^-----------^ 
if (programsToInclude) { // <== Again, see below the fold 
    this.filteredProducts = this.filteredProducts.filter(x => programsToInclude.indexOf(x.programName) > -1); 
} 

In beiden Fällen wird programsToInclude endet jedoch ein Array. Wenn Sie es später erneut als jQuery-Objekt verwenden möchten, müssen Sie es zurück konvertieren. Wenn Sie es nicht möchten, später verwenden, haben Sie vielleicht das Array trennen:

var programsToInclude = $(".programCheckbox:checkbox:checked").map(function(e) { return e.value; }); 
if (programsToInclude) { // <== Same note 
    let a = this.programsToInclude.get(); 
    this.filteredProducts = this.filteredProducts.filter(x => a.indexOf(x.programName) > -1); 
} 

---

Warum Check sinnlos ist: Ein jQuery-Objekt, auch eine leere, ist immer truthy. Wenn Sie nach einem leeren suchen möchten, verwenden Sie if (obj.length). Aber es gibt nicht viel Sinn in einem solchen Check, wenn Sie vorhaben, filter, filter ist ein No-Op, wenn das Objekt sowieso leer ist.