时间戳

首页 > 解决方案 > 将数据发送到模态并返回到 Angular/Bootstrap 中的组件

angular - 将数据发送到模态并返回到 Angular/Bootstrap 中的组件

问题描述

我有一个用户列表，我想使用模式编辑用户的详细信息。如何将数据从组件的用户列表传递到模式，然后在组件代码中获取这些详细信息（以便调用 API）？

这是组件代码：

export class DeviceUsersInternalComponent implements OnInit {   
    @Input() summary: any;
    users: UserDetails[];

    updateCredentials() {
    }
}

这是html：

<div class="col-lg-6 col-md-6 col-sm-6" *ngIf="summary">
    <div class="panel panel-default panel-primary">
        <div class="panel-heading">
            <div class="thead">USERS</div>
        </div>
        <div class="panel-body table-responsive">
            <p *ngIf="!users">No Users</p>
            <table class="table table-striped table-condensed table-borderless table-responsive" *ngIf="users">
                <tbody>
                    <tr *ngFor="let us of users">
                        <td>
                            <a class="btn btn-md btn-primary" 
                               data-toggle="modal" 
                               data-target="#changeCredentialsModal">{{ us.operatorId }}</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="changeCredentialsModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <div class="thead">Change details for {{ us.name }}</div>
            </div>
            <div class="modal-body">
                <form (ngSubmit)="onSubmit()" #changeCredentialsForm="ngForm">
                    <div class="form-group">
                        <table class="table table-condensed table-borderless">
                            <tr>
                                <td class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <label>Name: </label>
                                    <input type="text" class="form-control" ng-model="user.name"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal">Close</button>
                <button class="btn btn-success" data-dismiss="modal" (click)="updateDetails()">Submit</button>
            </div>
        </div>
    </div>
</div>

标签： angulartwitter-bootstraptypescriptwebpackangular6

解决方案

我通常使用 angular-material 和它们的对话框来处理这种类型的应用程序。

https://material.angular.io/components/dialog/overview

它真的很容易使用。您基本上为您创建了一个模态组件，使用服务打开它，并且很容易与它共享数据：在服务端：

dialog.open(DialogComponent, {
   sharedDatas: 'test'
}

在对话框组件方面：

constructor(@Inject(MAT_DIALOG_DATA) public sharedData: any)

推荐阅读