无法从Angular 4中的模型中获取输入字段的值

Question

我有一个类似

的模态

                <div id="addDeployment" class="modal fade" role="dialog">
                <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add Deployment to {{selectedOwner==null ? 'Unassigned' : selectedOwner.Name}}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"><label for="editOwnerName">Deployment Name</label></span>
                                    <input type="text" class="form-control" name="deploymentName" id="deploymentName" [(ngModel)]="deploymentName" 
                                            placeholder="" autofocus autocomplete="off" />
                                </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" (click)="fnAddDeploytment()">Add Deployment</button>
                    </div>
                </div>

                </div>
            </div>

我想从函数 fnAddDeploytment 中的textBox中获取值 我所做的是

1. 在ts文件中创建变量deploymentName : any。
2. 在 fnAddDeploytment（）功能中，我无法通过this.deploymentName获取输入字段的值，并输出undefined

在我的 .ts 文件中，声明

 public deploymentName: any;

然后

fnAddDeploytment(){
    var ownerName = this.selectedOwner.Name;
    var ownerKey = this.selectedOwner.key;
    var DeploymentName = this.deploymentName;

    console.log('Owner name is' +ownerName + ' and deployment name is ' +this.deploymentName);

  }

这是什么问题？我想不明白。