Question

在我的应用程序组件中，我有一个表格，当用户点击任何一行时，会显示一个模态。模态包含有关行的详细信息。这是通过我的组件内的以下HTML代码与表实现的。

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

查看数据是否被传入。正如您所预测的那样，这不起作用并在我的控制台内生成未定义。我想我可以看到问题来自[bugInputTest] =“myBug”，因为在标签所在的for循环之外无法访问myBug ...

如何将数据从主组件传递到Angular2中的模态组件？

Answer 1

在模态组件中您需要编写configurationForm方法

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

Angular 2将数据传递给模态组件

1 个答案: