Angular 4將數據/參數傳遞給模態（使用ngfor）

Question

我是角度4的新手，我正在使用ngFor在數組中顯示數據。每個插件都有許多用戶和我從后端獲得的這些用戶（id，角色等）的列表（spring boot project我正在嘗試做的是顯示這些用戶的數量，當用戶點擊顯示數字的按鈕時，會彈出一個模態並顯示這些用戶的詳細信息。 所以我遇到的問題是如何將{{addon.something}}傳遞給模態。

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

我試圖將它傳遞給(click)="open(content,addon)" ，但它不起作用。

處理模態的Typescript代碼：

 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}`;
    }
  }

什么是將數據/參數傳遞給模態的最佳方法？

Answer 1

我知道這是一個非常古老的問題，但我為實現這一目標付出了很多努力。 所以寫在這里可能有助於某人。 請注意，這個答案適用於Angular 6。

因此，如果您想將任何數據（可以是像Person這樣的任何對象）傳遞給子，這可以像這樣完成。

在子組件中，您需要使用@Input（）注釋聲明該變量，如：

  //Required imports
  export class ChildComponent implements OnInit {

  @Input() dataToTakeAsInput: any;

  ngOnInit() {
  }
  constructor() { }
}

現在要從父組件傳遞此dataToTakeAsInput，您可以使用componentInstance，如下面的代碼所示：

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

像這樣你可以傳遞多個對象。

Answer 2

您沒有將addon參數傳遞給modalService.open方法。 如果你想將數據從addon傳遞給模態，看起來你只需要傳遞它（而不是content參數）。 從這個例子： https ： //ng-bootstrap.github.io/#/components/modal/examples ，我認為如果你刪除content參數，只需傳入addon如下所示：

HTML

(click)="open(addon)"

TS

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

---

要對此進行測試，請將所有內容保留在當前實現中，然后將參數更改為this.modalService.open如下所示：

this.modalService.open(addon)...