4 votes

Angular: DataList ne met pas à jour l'affichage

J'ai un modèle comme ci-dessous :

      {{i-1}}

Et un fichier TS comme ceci :

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  dataListOptions: any[] = [1, 2, 3, 4, 5, 6];

  constructor() {
  }

  ngOnInit() {
     this.dataListOptions.push(123);
  }
}

Lorsque je mets à jour les dataListOptions dans ngInit() ou après, il met à jour le DOM car je peux voir les nouvelles options, mais lorsque je clique sur l'élément input, je ne peux toujours pas voir les données du tableau nouvellement insérées.

J'ai essayé d'utiliser ChangeDetectorRef après la mise à jour mais sans succès.

Ma question est que dois-je faire pour rendre les options ajoutées après la définition de dataListOptions visibles. Je peux les voir lorsque j'inspecte la vue mais je ne peux pas les voir dans un "menu déroulant"

enter image description here

enter image description here

---MISE À JOUR---

Je viens de réaliser que ExampleComponent implémente ControlValueAccessor. Je n'ai aucune idée de pourquoi il a été ajouté ni comment cela fonctionne, donc je dois faire quelques recherches supplémentaires car il semble qu'il soit impliqué d'une manière ou d'une autre dans la mise à jour de l'affichage ou du domaine

---MISE À JOUR---

L'entrée est dans une boucle

1voto

user2155645 Points 1

Je ne suis pas sûr pourquoi l'affichage n'est pas cohérent avec l'élément inspecté mais tout ce que j'ai eu à faire est d'ajouter [attr.list]="'datalist'+x" au datalist et rendre l'id de chaque élément quelque peu unique.

      {{i-1}}

-1voto

paras shah Points 597

Cela est dû au fait que vous avez initialisé le tableau avec une valeur et Angular n'a pas pu détecter la dernière.

Essayez de vider le tableau et de le remplir à nouveau comme suit :

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  dataListOptions: any[] = [1, 2, 3, 4, 5, 6];

  constructor() {
  }

  ngOnInit() {
          this.dataListOptions=[]; // ceci est la partie principale du code de travail
     for (var i =0; i <=6; i++) {
        this.dataListOptions.push(i);
          }
     this.dataListOptions.push(123);
  }
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X