Angular2中的条件ngModel

Question

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

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

如果存在电话号码,这很有效,但如果不存在,我会收到以下错误:

无法读取未定义的属性"full_number"

所以基于这个SO帖子LINK,我尝试了以下内容:

<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再次使用并重复该代码集.但是,我应该怎样做才能内联,就像三元条件检查一样？

Answer 1

我会这样做:

[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错误,那么看看这个答案:

• Webstorm:"必须升值"意味着什么

Answer 2

对于此类绑定表达式,您需要拆分属性和事件绑定,如:

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