angular - Angular2 中的条件 ngModel

Question

我有一个要求，只有当它存在时，我才需要将电话号码绑定(bind)到 ngModel。我的代码如下:

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

如果有电话号码，这会很好用，但如果没有，我会收到以下错误:

Cannot read property 'full_number' of undefined

因此基于这篇 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>

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

Uncaught Error: Template parse errors

解决此问题的一种方法是使用 *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: What does "Must be lvalue" mean