Question

我正在尝试使用角度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';
    }
}

在控制台中，我可以看到数据可用但在模态下无法查看任何数据。

在数据中，我从网络服务获得此回复 - ＆gt;

{"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}

我不知道它为什么不起作用。

Answer 1

我从上面的描述和评论中得出的结论是，在创建模态模板之前，服务还没有响应。我不确定它是否可行，但请你试试：

不是直接在模态中使用数据，而是使用初始化为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">

如果有效，请分享！

如何在angular 2 bootstrap模式中使用* ngFor

1 个答案: