[英]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.