*ngFor avec liaison bidirectionnelle dans IONIC 2

Question

J'ai une page avec un bouton qui, lorsqu'il est pressé, affiche une fenêtre modale contenant une liste de cases à cocher. Lorsque cette fenêtre modale est fermée, elle renvoie les éléments qui ont été cochés, et je veux créer un nouveau badge pour chaque élément retourné dans la page d'origine.

J'ai essayé avec *ngFor, mais cela ne fonctionne pas, car les "tags" ont été chargés après le chargement de cette page.

Ma question est donc la suivante : comment puis-je créer un "*ngFor" qui actualise automatiquement l'interface lorsque le modèle change ? Quelque chose comme une liaison bidirectionnelle.

Voici mon code HTML :

            Tags                    

    {{tag.name}}    

EDIT : Je retourne les éléments sélectionnés lorsque la page modale est fermée, en utilisant le pattern observable, comme ceci :

dismiss() {
    this.events.publish(EventIndex.onTagsModalClose, this.dataset.filter(x => { return x.isSelected==true }));
    this.viewCtrl.dismiss();
}

Et je les reçois comme ceci :

private onTagsModalClose(args: any) {        
    this.tags = args;
    this.hasSelectedTags = (args).length > 0;
    console.log(this.tags);
}

Dans la console, les éléments s'affichent correctement

Answer 1

Essayez ceci:

Dans votre classe, déclarez les tags en tant que BehaviorSubject

tags : BehaviorSubject = new BehaviorSubject([]);

Lorsque vous recevez les nouveaux tags, vous devez émettre la nouvelle valeur

private onTagsModalClose(args: any) {        
    this.tags.next(args);
    this.hasSelectedTags = (args).length > 0;
    console.log(args);
}

Et dans votre modèle, abonnez-vous à celui-ci avec le pipe async

            Tags                    

    {{tag?.name}}