Angular2中有条件的ngModel

我有一个要求，我需要绑定电话号码ngModel只有当它存在。我的代码如下：Angular2中有条件的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，并再次重复该组码。但是，我应该怎样做内联，就像三元条件检查一样？

来源

2017-07-17 Abhi

我会做这样的：

[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"不会工作）

来源

2017-07-17 12:32:11 yurzui

这对我来说确实有效，但是请你加一些解释让我明白吗？ – Abhi

对于需要分割财产和事件样结合这样的绑定表达式：

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

来源

2017-07-17 12:27:46

它是''phone_numbers？.length && phone_numbers [0]？phone_numbers [0] .full_number = $ event：null“'???。我得到如下错误：解析器错误：条件表达式phone_numbers [0]？长度？ phone_numbers [0] .full_number = $ event需要表达式末尾的所有3个表达式 – Abhi

我忘了最后一块 - 固定 –

如果这不起作用，请尝试添加parens'（phone_numbers？.length && phone_numbers [ 0]）？ ...' –

Angular2中有条件的ngModel

回答

相关问题