Angular 2將數據傳遞給模態組件

在我的應用組件中，我有一個表格，當用戶單擊任何一行時，模式顯示出來。該模式包含有關該行的詳細信息。這是通過組件中的以下HTML代碼與表進行實現的。Angular 2將數據傳遞給模態組件

<tr *ngFor="let myBug of myBugs" [attr.data-target]=" '#' + bugDetail.modalId" data-toggle="modal" 
(click)="bugDetail.configureForm(myBug)"> 
<td>{{ myBug.title }}</td>

但是，這種方法的問題是，ngOnInit完成後的數據傳遞。因此，如果在myModal.component.html中執行以下操作，應用程序將首先崩潰，因爲該值未定義。

{{myBug.title}} // This is inside myModal.component.html

據我所知，我可以做以下事情擺脫錯誤。不過，我不想這樣做，因爲該模式應該從點擊錶行

{{myBug?.title}}

所以我嘗試添加我的模組件內將以下代碼數據生成

@Input() bugInputTest

而在我的表HTML代碼，我切換到以下

<tr 
    *ngFor="let myBug of myBugs" 
    [attr.data-target]=" '#' + bugDetail.modalId" 
    data-toggle="modal" 
    (click)="bugDetail.configureForm(myBug)"> 
    <td>{{ myBug.title }}</td> 
</tr> 

<modal-approval-detail #bugDetail [bugInputTest]="myBug"></modal-approval-detail>

和內部ngOnInit（）我的模態分量裏面，我把

console.log(this.bugInputTest)

看看數據是否被傳入。正如你所預料的，這不起作用，並在我的控制檯內生成undefined。我想我可以看到問題來自[bugInputTest] =「myBug」，因爲myBug無法在標籤所在的for循環之外訪問...

如何將數據從我的主要組件傳遞到模式Angular2中的組件？

來源

2017-01-30 user172902

在模態分量你需要寫configurationForm方法

@ViewChild('myModal') 
    modal: ModalComponent; 
    @Input() bugInputTest : MyBug 
    public configureForm(myBug : MyBug)void { 
      this.bugInputTest = JSON.parse(JSON.stringify(myBug)); 
      this.modal.open(); 
    }

來源

2017-01-30 09:20:38 Trusha

Angular 2將數據傳遞給模態組件

回答

相關問題