typescript - Angular 4 Overførsel af data/parametre til en modal (ved brug af ngfor)

Jeg er ny til Angular 4, og jeg viser data inde i et array ved hjælp af ngFor. Hver addon har et antal brugere og en liste over disse brugere (id, rolle osv.), som jeg har formået at hente fra backend (Spring Boot-projekt). Hvad jeg prøver at gøre, er at vise antallet af disse brugere; når brugeren klikker på knappen, der viser antallet, popper en modal op og viser detaljerne om disse brugere. Problemet, jeg støder på, er, hvordan man sender {{addon.something}} til modalen.

       <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>

Jeg prøvede at sende det ind i (click)="open(content,addon)", men det virker ikke.

Typescript-kode til håndtering af 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}`;
    }
  }

Hvad kunne være den bedste måde at sende data/parametre til en modal på?

Svar #1

Jeg ved, det er et meget gammelt spørgsmål, men jeg kæmpede meget for at opnå dette. Så jeg skriver her, at det måske kan hjælpe nogen. Bemærk, at dette svar er til Angular 6.

Så hvis du vil sende data (som kan være et hvilket som helst objekt som Person) til et barn, kan dette gøres sådan her.

I børnekomponenten skal du erklære den variabel med @Input() annotation som:

  //Required imports
  export class ChildComponent implements OnInit {

  @Input() dataToTakeAsInput: any;

  ngOnInit() {
  }
  constructor() { }
}

Nu for at sende disse dataToTakeAsInput fra forælderkomponenten, kan du bruge componentInstance som vist i nedenstående kode:

//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);
    });
  }
}

På denne måde kan du overføre flere objekter.

Svar #2

Du sender ikke addon-parameteren til modalService.open-metoden. Hvis du vil sende data fra addon til modalen, ser det ud til, at du blot skal sende det (i stedet for content-parameteren). Ud fra dette eksempel: https://ng-bootstrap.github.io/#/components/modal/examples, ville jeg antage, at hvis du fjerner content-parameteren og bare sender addon sådan her:

html

(click)="open(addon)"

ts

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

For at teste dette, behold alt i din nuværende implementering og ændr blot argumentet til this.modalService.open sådan her:

this.modalService.open(addon)...

Relaterede artikler