Angulaire 4 la transmission des données/paramètres modaux (à l'aide de ngfor)

je suis nouveau sur angulaire 4 et je suis de l'affichage des données à l'intérieur d'un tableau à l'aide de ngFor.Chaque addon a un certain nombre d'utilisateurs et la liste de ces utilisateurs(id,rôle,etc) que j'ai réussi à obtenir à partir du backend(printemps de démarrage du projet).ce que j'essaie de faire, c'est afficher le nombre de ces utilisateurs,lorsque l'utilisateur clique sur le bouton qui affiche le nombre,un modal pop-up et d'afficher les détails de ces utilisateurs.
Donc le problème que j'obtiens est la façon de passer le {{addon.quelque chose}} à la modale.

       <tbody>
            <tr *ngFor="let addon of addons">
                <td>{{addon.name}}</td>
                <td>{{addon.url}}</td>
                <td>{{addon.location}}</td>
               <td>
                 <button class="btn btn-outline-primary" (click)="open(content,addon)" >{{addon.users.length}}</button>
                 <!--{{addon.users.length}}-->
                </td>

                <td>
                    <a routerLink="/assign_user_to_addon/{{addon.id}}">Add user</a>
                </td>
            </tr>
        </tbody>

J'ai essayé de la passer dans le (click)="open(content,addon)" ,mais cela ne fonctionne pas.

Tapuscrit code de gestion du modal :

 open(content:any,addon:any) {
    this.modalService.open(content).result.then((result) => {

      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }

Ce qui pourrait être la meilleure façon de transmettre des données/paramètres pour un modal ?

quel est l'objectif de "contenu" dans votre cas? avez-vous essayé de le supprimer et de ne disposez que "addon" (open(addon)) - ce qui, normalement, devrait passer à l'élément de votre tableau.
A ma réponse travailler pour vous ou êtes-vous toujours à la recherche d'une solution?
je ne suis pas sûr, parce que j'ai copié le code à partir de ce lien ng-bootstrap.github.io/#/composants/modal/exemples mais il ne ressemble à son spécifique à la modale de lui-même...
ça ne marche toujours pas,d'effacer le contenu de la (sur)="ouvrir(xxx)" la fonction ou cette.modalService.open() donne une erreur...
Qu'est-ce que le nouveau code que vous essayez et qu'est-ce que la nouvelle erreur?
j'ai réussi à afficher les données lors du remplacement du contenu de la variable par des données(donc ce que tu as écrit est en fait correcte),mais maintenant, je suis toujours en difficulté avec l'affichage d'un objet à l'intérieur du corps de la modale.lors du passage d'une simple valeur comme (cliquez)="ouvrir(addon.nom)" , il ne montre que la valeur sans le corps du modal,mais quand j'ai essayer de passer par un tableau, il afficher ce message d'erreur "Aucun composant de l'usine trouvé pour [object object]" Aucun composant de l'usine trouvé pour [object object]
J'aurais besoin de voir le code pour résoudre la nouvelle erreur, et c'est en dehors de la portée de cette question. Je serais heureux de prendre un coup d'oeil à une nouvelle question si vous rencontrez toujours un problème et que vous souhaitez ouvrir un. Je suis content d'avoir pu aider avec votre problème, veuillez accepter / upvote la réponse si vous l'avez trouvé utile ou si ça répond à votre question (afin que les autres gens connaissent votre problème a été résolu). Bienvenue ALORS 🙂
J'ai réussi à le faire fonctionner avec un unoptimized façon. la faute en est à l'aide de la (sur)="ouvrir(xx)" pour transmettre des données dans le corps de l'modal et l'accès de cette façon {{utilisateur.userId}} (avec ngfor ou quoi que ce soit).alors maintenant, j'ai créé une variable globale appelée "usersInfo" ,et je l'utilise pour transférer les données vers le modal corps.je suis bien conscient que c'est un unoptimized moyen de le faire fonctionner,et je vous en seront reconnaissants si vous pouvez les proposer quelque chose de mieux. voici le code : paste.ofcode.org/sYhU6JHHkmbK3aum86tYWF
La section des commentaires n'est pas le bon endroit pour poser une autre question, car il ne me donne pas assez de contexte pour lire votre question et de construire une réponse (je ne reçois 500 caractères!). Veuillez ouvrir un nouveau sujet avec votre nouveau numéro et je serais heureux de prendre un coup d'oeil.

InformationsquelleAutor med.b | 2018-02-12

2

Vous n'êtes pas en passant la addon paramètre à la modalService.open méthode. Si vous souhaitez transmettre les données à partir de addon à la modale, on dirait que vous juste besoin de passer par là (au lieu de la content paramètre). À partir de cet exemple: https://ng-bootstrap.github.io/#/components/modal/examples, je suppose que si vous supprimez le content paramètre et vient de passer en addon comme suit:

html
```
(click)="open(addon)"
```
ts
```
open(content) {
  this.modalService.open(content)...
}
```
Pour tester cela, tout quitter en cours de mise en œuvre et il suffit de changer l'argument de this.modalService.open comme ceci:
```
this.modalService.open(addon)...
```
- comment faire pour passer plusieurs paramètres
InformationsquelleAutor vince

Je Sais que c'est une très vieille question,mais j'ai eu beaucoup de mal à y parvenir. Ainsi écrit ici, cela pourrait aider quelqu'un. Notez que cette réponse est Angulaire 6.

Donc, Si vous voulez passer des données (qui peut être n'importe quel objet comme Personne) à l'enfant ce qui peut être fait comme ça.

En composant enfant, vous devez déclarer cette variable avec @Input() annotation comme :

  //Required imports
  export class ChildComponent implements OnInit {

  @Input() dataToTakeAsInput: any;

  ngOnInit() {
  }
  constructor() { }
}

Maintenant de passer ce dataToTakeAsInput du composant parent, vous pouvez utiliser componentInstance comme indiqué dans le code ci-dessous :

//Required imports
export class ParentComponent implements OnInit {

  dataPassToChild: any = null;

  constructor(private modalService: NgbModal) { }

  ngOnInit() {

  }
openChilldComponentModel(){

    const modalRef = this.modalService.open(ChildComponent, { size: 'lg',backdrop:false});

    (<ChildComponent>modalRef.componentInstance).dataToTakeAsInput = dataPassToChild;

    modalRef.result.then((result) => {
      console.log(result);
    }).catch( (result) => {
      console.log(result);
    });
  }
}

Comme cela, vous pouvez passer plusieurs objets.

InformationsquelleAutor Chandan Rajput

Vous devez vous connecter pour publier un commentaire.