web-dev-qa-db-fra.com

Angular 4 Passage de données / paramètres à un modal (en utilisant ngfor)

je suis nouveau sur angular 4 et j'affiche des données à l'intérieur d'un tableau en utilisant ngFor. Chaque addon a un certain nombre d'utilisateurs et une liste de ces utilisateurs (id, rôle, etc.) que j'ai gérés pour obtenir à partir du backend (projet de démarrage de printemps). Ce que j'essaie de faire est d'afficher le nombre de ces utilisateurs, lorsque l'utilisateur clique sur le bouton affichant le numéro, un modal apparaît et affiche les détails de ces utilisateurs. le problème que je reçois est de savoir comment passer le {{addon.something}} au modal.

       <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 le passer dans le (click)="open(content,addon)", mais ça ne marche pas.

Code TypeScript pour gérer le 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}`;
    }
  }

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

angulartypescriptbootstrap-modalngfor
3
med.b

Vous ne passez pas le paramètre addon au modalService.open méthode. Si vous voulez passer les données de addon au modal, il semble que vous ayez juste besoin de le passer (au lieu du paramètre content). De cet exemple: https://ng-bootstrap.github.io/#/components/modal/examples , je suppose que si vous supprimez le paramètre content et passez simplement addon comme ceci:

html 

(click)="open(addon)"

ts 

open(content) {
  this.modalService.open(content)...
}

Pour tester cela, laissez tout dans votre implémentation actuelle et changez simplement l'argument en this.modalService.open comme ça:

this.modalService.open(addon)...
2
vincecampanale

Je sais que c'est une très vieille question, mais j'ai beaucoup lutté pour y parvenir. Donc, écrire ici pourrait aider quelqu'un. Notez que cette réponse est pour Angular 6.

Donc, si vous voulez transmettre des données (qui peuvent être n'importe quel objet comme Person) à l'enfant, cela peut être fait comme ceci.

Dans le composant enfant, vous devez déclarer cette variable avec l'annotation @Input () comme:

  //Required imports
  export class ChildComponent implements OnInit {

  @Input() dataToTakeAsInput: any;

  ngOnInit() {
  }
  constructor() { }
}

Maintenant, pour transmettre ce dataToTakeAsInput à partir 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 ça, vous pouvez passer plusieurs objets.

2
Chandan Rajput