Отправлять данные в модальное окно и обратно в компонент в 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>
@ Code-EZ хорошая идея, попробую.
а также, если вы хотите работать с обнаружением изменений в компоненте на основе новых данных службы, создайте свойство геттера-установщика в своем компоненте. получить пользователей (): UserDetails [] {вернуть this.service.UserDetails; }.что-то вроде этого
вы можете использовать ng-bootstrap для модального; у него есть ModalService, который вы можете использовать для передачи данных от родителя к модальному и динамического открытия модального окна из кода. Затем вы можете использовать EventEmitter в своем модальном окне для возврата данных из службы.
Ответы 2
Один из подходов - обмен данными с помощью сервисов Angular.
установить данные для чтения из модального компонента перед его открытием
service.UserDetails=["Setting some data"];
modal.open() //code for open the popup
Когда вы закрываете всплывающее окно, если вы хотите, чтобы обнаружение угловых изменений работало на основе новых данных службы, вы можете создать свойство getter / setter в компоненте для синхронизации с новыми данными службы.
model.close()// when model close you can update the service property
service.UserDetails= ["Updated the data"];
В компоненте вы можете сделать как показано ниже. Таким образом, вам не нужно явно вызывать обнаружение изменений - Angular сделает это за вас автоматически.
export class DeviceUsersInternalComponent implements OnInit {
@Input() summary: any;
get users():UserDetails[]{ return this.service.UserDetails; }
updateCredentials() {
}
}
или вы можете использовать Субъекты RxJS или EventEmitter для отправки обратно данных из модального окна в компонент и обновления свойства компонента.
Я обычно использую angular-material и их диалоги для этого типа приложений.
https://material.angular.io/components/dialog/overview
Это действительно удобно. По сути, вы создаете модальный компонент, открываете его с помощью службы, и с ним легко делиться данными: Со стороны сервиса:
dialog.open(DialogComponent, {
sharedDatas: 'test'
}
На стороне компонента диалога:
constructor(@Inject(MAT_DIALOG_DATA) public sharedData: any)
пробовали с angular сервисами? Вы можете установить данные в службу, прежде чем открывать модальное всплывающее окно, и прочитать их в модальном окне после его открытия.