值没有以角度绑定答案

【问题标题】：value not getting bind in angular值没有以角度绑定
【发布时间】：2019-10-08 06:29:20
【问题描述】：

这里我有两个字段，一个是输入，一个是下拉。对于下拉列表，值来自 api。当我在输入字段中输入数字时，点击回车键后，它将调用函数并且有两个条件，如果条件1匹配

this.cardModel.payType.value="Visa";

并且该值应显示为下拉菜单的默认值。

如果条件2匹配则

 this.cardModel.payType.value="Master Card";

并且那些分配的值应该显示为默认值的下拉菜单。但是，尽管我在 html 文件中给出了[(ngModel)]="cardModel.crd_no.value，但该值并未显示。没有得到我做错的地方。请帮帮我！！

html

<input name="crd_no" (keydown.enter)="youFuncToCheck(card_number)" [(ngModel)]="cardModel.crd_no.value"  type="text" class="form-control">


    <select class="form-control" name="typeOfPayment"  [(ngModel)]="cardModel.payType.value">
     <option *ngFor="let itm of payType" value={{itm.key}}>{{itm.display}}</option>
    </select>

ts 文件

youFuncToCheck(card_number){
card_number=this.payType.crd_no.value

 // visa
 var re = new RegExp("^4");
 if (card_number.match(re) != null){
  this.cardModel.payType.value="Visa";
}

var re=new RegExp("^5[1-5][0-9]{0,14}|^(222[1-9]|2[3-6]\\d{2}|27[0-1]d|2720)[0-9]{0,12}");
   if(card_number.match(re) != null)
     this.cardModel.payType.value="Master Card";
   }

【问题讨论】：

你能把代码放在 StackBlitz 上更清楚吗？

标签： angular data-binding

【解决方案1】：

请注意以下示例，其中 select 中的值和 option 中的值相同。请确保两个值相同且类型相同。这样您就可以进行默认选择

<select  class='form-control' 
            (change)="ChangingValue($event)" [value]='46'>
      <option value='47'>47</option>
      <option value='46'>46</option>
      <option value='45'>45</option>
    </select>

【讨论】：

【解决方案2】：

这是在select 元素中使用ngModel 的一些基本代码：

html文件

  <select class="form-control" name="typeOfPayment"  [(ngModel)]="cardModel.payType.value">
     <option *ngFor="let itm of payType" [ngValue]={{itm.key}}>{{itm.display}}</option>
  </select>

ts 文件：

     cardModel.payType.value = ''

【讨论】：