[英]How to pass data from component to ngBootstrap modal in Angular 7?
我有一个表,其中包含使用ngFor显示的数据。 我需要在单击时以模式显示单个行数据。 我可以通过将行作为click参数传递而在控制台中登录,但不能在模式内部传递它。
假设正在从服务中获取表数据,并且模式是模板引用,该模板引用与表位于相同的组件文件中。
这是创建的小提琴https://stackblitz.com/edit/angular-xr8ud5
我已使用angular 1.x,并且数据通过了解析。 我是Angular的新手,从未在ngBootstrap中工作。
任何帮助表示赞赏。 谢谢
只需将所选行存储在变量中,然后我们就可以在HTML上显示
在您的stackblitz中 ,将modal-basic.html更改为:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tableRow of table" (click)="open(content, tableRow)">
<th scope="row">{{tableRow.id}}</th>
<td>{{tableRow.first}}</td>
<td>{{tableRow.last}}</td>
<td>{{tableRow.handle}}</td>
</tr>
</tbody>
</table>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Details</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
id:<u>{{selectedRow.id}}</u><br>
first:<u>{{selectedRow.first}}</u><br>
last:<u>{{selectedRow.last}}</u><br>
handle:<u>{{selectedRow.handle}}</u>
</div>
</ng-template>
<hr>
<pre>{{closeResult}}</pre>
在您的stackblitz中 ,将modal-basic.ts更改为:
import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-basic',
templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
closeResult: string;
table = [
{
"id": 1,
"first":"Mark",
"last": "Otto",
"handle": "@mdo"
},{
"id": 2,
"first":"Jacob",
"last": "Thornton",
"handle": "@fat"
},{
"id": 3,
"first":"Larry",
"last": "the Bird",
"handle": "@twitter"
}
];
selectedRow;
constructor(private modalService: NgbModal) {}
open(content, tableRow) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
//console.log(tableRow)
this.selectedRow = {id:tableRow.id, first: tableRow.first, last:tableRow.last, handle:tableRow.handle};
}
}
可以通过Angular的2-way绑定将数据从组件传递到ngBoostrap模态。 实际上,这与在Angular 1.x上进行2向绑定的方式相同!
我为您制作了一个演示 。
首先,在model-basic.ts上,为模态定义模型。 然后,为modalContent
模型属性分配表行数据。
modalContent:undefined
.
.
open(content, tableRow) {
this.modalContent = tableRow
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
}
在modal-basic.html上,您可以使用{{...}} 模板表达式在模态本身上显示模型的各个属性。
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Details</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
id: {{ modalContent.id }}
<br>
first: {{ modalContent.first }}
<br>
last: {{ modalContent.last }}
<br>
handle: {{ modalContent.handle }}
</div>
</ng-template>
您可以在组件中为模态数据创建变量: StackBlitz
或者您可以为模式创建组件:
基本情态
openModal(dataToModal) {
const modalRef = this.modalService.open(ModalComponent);
modalRef.componentInstance.inputDataInModalComponent = dataToModal;
modalRef.result.then(() => {});
}, () => {});
}
modal.component.ts
export ModalComponent implements OnInit{
@Input() inputDataInModalComponent: any;
ngOnInit() {
console.log(inputDataInModalComponent);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.