matériau déroulant de sélection avec la recherche produit 100% cpu

je le code html suivantmatériau déroulant de sélection avec la recherche produit 100% cpu

<material-dropdown-select [buttonText]="organizer?.name" 
    [options]="filteredSailingClubs" 
    [itemRenderer]="displayNameRenderer"> 
    <div header> 
     <material-select-searchbox 
      label="Search..." 
      [filterable]="filteredSailingClubs"> 
     </material-select-searchbox> 
    </div> 
</material-dropdown-select>

et la mise en œuvre suivante

var _list = [new SailingClub('123', 'Example1'), new SailingClub('456', 'Example2')]; 

final ItemRenderer<SailingClub> displayNameRenderer = (SailingClub item) => item.name; 

StringSelectionOptions<SailingClub> get filteredSailingClubs => new StringSelectionOptions(_list, toFilterableString: displayNameRenderer);

Malheureusement, le momemnt je charger une page avec ce contenu dans le navigateur l'onglet semble produire 100% de la charge du processeur et je n'ai aucune idée de comment déboguer cela.

Source

2017-09-07 Fabian

Bien sûr, après avoir publié ceci, j'ai immédiatement trouvé l'erreur. Je régénère les StringSelectionOptions dans la méthode get. Mais maintenant je me demande. ma liste des sailingclubs change de l'extérieur (firebase) mais mon exemple ne fonctionne qu'avec une liste statique, alors comment je gérerais ça? – Fabian

Vous pouvez définir un champ 'filteredSailingClubs', puis le mettre à jour chaque fois que vous mettez' _list' à jour. –

Merci pour l'idée, je ne vois toujours pas comment cela pourrait fonctionner. J'ai changé le filtréSailingClubs dans un champ qui est initialisé dans le constructeur. Mais c'est bien sûr plus tôt que mes données sont chargées. Je pourrais également obtenir de manière plus asynchrone plus de SailingClubs ajoutés via Firebase qui ne feraient que mettre à jour la liste dans le magasin mais pas dans mon domaine. Jusqu'à présent, j'ai itéré sur la liste avec ngFor et cela prendrait soin de la mise à jour automatiquement. Comment ferais-je cela maintenant? Mon magasin ne m'appellerait pas si la liste changeait et il ne devrait pas. – Fabian

Ok la raison était simple. Je reconstruis l'OptionList sur chaque accès de la liste:

StringSelectionOptions<SailingClub> get filteredSailingClubs => new StringSelectionOptions(_list, toFilterableString: displayNameRenderer);

il devrait seulement être construit une fois par ex. dans le constructeur de la classe.

Source

2017-09-09 07:39:55 Fabian

matériau déroulant de sélection avec la recherche produit 100% cpu

Répondre

Questions connexes