Angular 6：[(ngModel)] 并不总是有效

Question

我正在使用 Angular 6 和 Bootstrap Modals 来实现以下功能，点击修改按钮，会弹出一个带有值的模态。

我使用模板驱动表单 + [(ngModel)]，但是，它并不总是有效。有时我可以获得完整的信息，有时会错过一两个字段，有时所有字段都是空的。 （第一次很好，第二次以后都是空的。然后如果我点击其他信息，该字段被填充，除了一个的值与最后一个相同）

我的代码如下：

1. 父组件将值传递给子组件（模态）

@ViewChild(ModBranchDialogComponent) modDialog : ModBranchDialogComponent;

(omit)

onModify(pKey: string){
    let bcnMain = this.branchDatas.find(x => x.pKey == pKey) as BranchMain;
    console.log('bcnMain=' + JSON.stringfiy(bcnMain));
    this.modDialog.showMod(bcnMain);
  }

1. 模型组件（我总是可以在这个 Console.log 中打印正确的完整信息）

export class ModBranchDialogComponent implements OnInit {

  public branchMain : BranchMain = new BranchMain();

  showMod(bchMain: BranchMain){
    console.log("modify bchMain=" + JSON.stringify(bchMain));
    this.branchMain = bchMain;
    $("#modBranchDialog").modal("show");
    $("#modBranchDialog").appendTo("body");
  }

}

1. 模态 HTML

<div class="modal fade" id="modBranchDialog" tabindex="-1" role="dialog" aria-labelledby="modBranchLabel" aria-hidden="true">
  <div class="modal-dialog" role="document" style="width:700px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form (ngSubmit)='doModBch()'>
        <div class="modal-body">
            <div style="width:90%; margin:auto">
                <div class="form-horizontal">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="branchId">branchId</label>
                            <input type="text" class="form-control" id="branchId" name="branchId" [(ngModel)]="branchMain.branchId">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <label for="branchCPS">branchCPS</label>
                            <input type="text" class="form-control" id="branchCPS" name="branchCPS" [(ngModel)]="branchMain.branchCPS">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <label for="branchNm">branchNm</label>
                            <input type="text" class="form-control" id="branchNm" name="branchNm" [(ngModel)]="branchMain.branchNm">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <label for="isSub">isSub</label>
                            <select id="isSub" class="form-control" name="isSub" [(ngModel)]="branchMain.isSub">
                                <option [ngValue]="" selected>-choose-</option>
                                <option [ngValue]="1">Y</option>
                                <option [ngValue]="0">N</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <label for="belongBch">belongBch</label>
                            <input type="text" class="form-control" id="belongBch" name="belongBch" [(ngModel)]="branchMain.belongBch">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-info">CONFIRM</button>
          <button type="button" class="btn btn-info" data-dismiss="modal">CANCEL</button>
        </div>
      </form>
    </div>
  </div>
</div>

我不知道为什么有时它有效，有时却无效。任何人都可以帮忙吗？谢谢。

更新：尝试如下添加 ngif，但没有运气。

branchMain: {{branchMain | json}}
      <form (ngSubmit)='doModBch()'>
        <div class="modal-body" *ngIf="branchMain">

Answer 1

你可以使用@angular/forms 和 ReactiveFormsModule，双向绑定通常很难跟踪和调试。我给你一个建议——你应该创建和使用小组件来清洁你的代码。

Answer 2

看起来你有异步调用，所以尽量避免渲染视图，直到你通过结构指令*ngIf获得数据：

<div class="modal fade" id="modBranchDialog" *ngIf="branchMain">
    ...

更新：

您的select 未填充，因为isSub 不是数组。填充select的示例：

<select [(ngModel)]="yourData"> 
    <option *ngFor="let item of yourData"> 
        {{ item }}
    </option>
</select>

打字稿：

yourData = [1, 2, ,3 , 4 ,5]

更新1：

尝试将这样的? 符号添加到您的所有控件中：

<input type="text" class="form-control" id="branchNm" 
    name="branchNm" [(ngModel)]="branchMain?.branchNm">

更新 2：

在我看来真的很奇怪，但请尝试为您的所有控件编写*ngIf：

<!--write *ngIf for all input's-->
<div class="row">
    <div class="col-md-12">
        <label for="branchId">branchId</label>
        <input 
             *ngIf="branchMain?.branchId"
             type="text" class="form-control" id="branchId" name="branchId" 
             [(ngModel)]="branchMain.branchId">
     </div>
</div>
<div class="row">
    <div class="col-md-12">
         <label for="branchCPS">branchCPS</label>
        <input 
           *ngIf="branchMain?.branchCPS"
            type="text" class="form-control" id="branchCPS" name="branchCPS" 
              [(ngModel)]="branchMain.branchCPS">
         </div>
    </div>
<div class="row">
     <div class="col-md-12">
         <label for="branchNm">branchNm</label>
         <input 
             *ngIf="branchMain?.branchNm"  
              type="text" class="form-control" id="branchNm" name="branchNm" 
              [(ngModel)]="branchMain.branchNm">
     </div>
</div>
<!-- and so on -->

更新 3：

尝试用值清除对象并重新分配：

showMod(bchMain: BranchMain){
    console.log("modify bchMain=" + JSON.stringify(bchMain));

    if (this.branchMain)
        this.branchMain = null;

    this.branchMain = bchMain;
    $("#modBranchDialog").modal("show");
    $("#modBranchDialog").appendTo("body");
  }