Angular2中的条件ngModel

阿比

我有一个要求,我只需要将电话号码绑定到ngModel。我的代码如下:

<cd-input
  size="15"
  [(ngModel)]="phone_numbers[0].full_number"
  [reformat]="something"
  [format]="something"
  placeholder="(111) 222-3333">
</cd-input>

如果存在电话号码,此方法效果很好,但如果不存在,则会出现以下错误:

无法读取未定义的属性“ full_number”

因此,基于此POST链接,我尝试了以下操作:

<cd-input
  size="15"
  [(ngModel)]="phone_numbers[0].length > 0 ? phone_numbers[0].full_number : null"
  [reformat]="something"
  [format]="something"
  placeholder="(111) 222-3333">
</cd-input>

但是,这会导致语法错误。

未捕获的错误:模板解析错误

解决此问题的一种方法是*ngIf再次使用并重复代码集。但是,我应该做些什么来做内联处理,例如三元条件检查?

yurzui

我会这样做:

[ngModel]="phone_numbers && phone_numbers[0]?.full_number"
(ngModelChange)="phone_numbers?.length && phone_numbers[0].full_number=$event"

为什么?

[(ngModel)]扩展为[ngModel](输入)和(ngModelChange)(输出)。

我通过了

phone_numbers && phone_numbers[0]?.full_number

输入以确保我们phone_numbers在组件类中具有属性,并且它至少具有一项。而且我在这里也使用安全的导航操作符

当我们在输入ngModelChange处理程序中键入某些内容时,我会在此处执行相同的操作以检查undefined值,除非我无法在分配中使用安全的导航管道((ngModelChange)="phone_numbers && phone_numbers[0]?.full_number=$event"将无法使用)


如果您使用webstorm并看到Must be lValue错误,请参阅以下答案:

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章