[英]How to use *ngFor in angular 2 bootstrap modal
我試圖在angular 2中使用* ngFor將數據綁定到我的模態,但是當我的組件數據可用時,無法查看模態中的任何數據。
modal.component.html
<div class="modal modalscroll" tabindex="-1" role="dialog" [ngStyle]="{'display':addSplitBilling}">
<div class="modal-dialog splitBillingModal">
<form>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click) = "clearSplitBilling()">×</button>
<h4 class="modal-title">Split Billing</h4>
</div>
<div class="container"></div>
<div class="modal-body">
<table>
<tbody>
<tr *ngFor="let d of data.dupStmtAddresses; let i = index">
<td>{{d.addressee}}</td>
<td>{{d.splitPercent}}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
</div>
</div>
</form>
</div>
</div>
modal.component.ts
export class DupStatementsComponent implements OnInit {
addSplitBilling = 'none';
data: any;
ngOnInit() {
this.getData();
}
getData(){
this.duplicateStatementsProvider.getDuplicateStatements()
.subscribe(
data => {
this.data = JSON.parse(data['_body']);
},
error => {
}
);
}
splitBilling(){
console.log(this.data.dupStmtAddresses);
this.addSplitBilling = 'block';
}
}
在控制台中,我可以看到數據可用,但在模式下無法查看任何數據。
在數據中,我從Web服務獲得此響應->
{"createdDate":"2017-12-04T17:04:00.174+05:30","id":1,"dupStmtAddresses":[{"createdDate":null,"id":1,"addressee":"a","address1":"a","address2":"a","address3":"a","address4":"a","email":"a","splitPercent":null,"new":false},{"createdDate":null,"id":2,"addressee":"b","address1":"b","address2":"b","address3":"b","address4":"b","email":"b","splitPercent":null,"new":false},{"createdDate":null,"id":3,"addressee":"c","address1":"c","address2":"c","address3":"c","address4":"c","email":"c","splitPercent":null,"new":false}],"enableSplitBilling":true,"new":false}
我不知道為什么它不起作用。
從上面的描述和評論中可以得出的結論是,在創建模態模板之前,該服務尚未響應。 我不確定是否可以使用,但請您嘗試:
代替直接在模式中使用數據,可以使用初始化為null / empty字符串的新變量modalContent。 單擊按鈕以打開模態時,將數據分配給modalContent變量,並在ngFor
循環中使用它。
export class DupStatementsComponent implements OnInit {
modalContent: any = '';
//... same as your logic
splitBilling(){
console.log(this.data.dupStmtAddresses);
this.modalContent = this.data.dupStmtAddresses;
this.addSplitBilling = 'block';
}
}
您的ngFor循環:
<tr *ngFor="let d of modalContent; let i = index">
如果可以,請分享!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.