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值，除非我无法在赋值中使用安全导航管道（{{1赢得了工作）

如果您使用webstorm并看到(ngModelChange)="phone_numbers && phone_numbers[0]?.full_number=$event"错误，请参阅此答案：

Webstorm: What does "Must be lvalue" mean

Answer 2

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

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

Angular2中的条件ngModel

2 个答案: