[英]Conditional ngModel in Angular2
I have a requirement, I need to bind phone number to ngModel only if it's present. 我有一个要求,我只需要将电话号码绑定到ngModel。 My code is as follows: 我的代码如下:
<cd-input
size="15"
[(ngModel)]="phone_numbers[0].full_number"
[reformat]="something"
[format]="something"
placeholder="(111) 222-3333">
</cd-input>
This works well if phone number is present, but if it's not I get the following error: 如果存在电话号码,此方法效果很好,但如果不存在,则会出现以下错误:
Cannot read property 'full_number' of undefined 无法读取未定义的属性“ full_number”
So based on this SO post LINK , I tried the following: 因此,基于此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>
But, this causes syntax error. 但是,这会导致语法错误。
Uncaught Error: Template parse errors 未捕获的错误:模板解析错误
One way to fix this is using *ngIf
and repeating the set of code again. 解决此问题的一种方法是使用*ngIf
并再次重复代码集。 But, What should I do to do it inline, like a ternary condition check? 但是,我应该做些什么来做内联处理,例如三元条件检查?
I would do it like: 我会这样做:
[ngModel]="phone_numbers && phone_numbers[0]?.full_number"
(ngModelChange)="phone_numbers?.length && phone_numbers[0].full_number=$event"
Why? 为什么?
[(ngModel)]
is expanded to [ngModel]
(Input) and (ngModelChange)
(Output). [(ngModel)]
扩展为[ngModel]
(输入)和(ngModelChange)
(输出)。
I passed 我通过了
phone_numbers && phone_numbers[0]?.full_number
to input to ensure that we have phone_numbers
property in our component class and it has at least one item. 输入以确保我们在组件类中具有phone_numbers
属性,并且至少具有一项。 And i also use here safe navigation operator 而且我在这里也使用安全的导航操作符
When we type something in input ngModelChange
handler is called and i do the same things here for checking undefined
value unless i can't use safe navigation pipe in the assignment ( (ngModelChange)="phone_numbers && phone_numbers[0]?.full_number=$event"
won't work) 当我们在输入中键入某些内容时,将调用ngModelChange
处理函数,并且我在此处执行相同的操作以检查undefined
值,除非我无法在分配中使用安全的导航管道( (ngModelChange)="phone_numbers && phone_numbers[0]?.full_number=$event"
无效)
If you use webstorm and see Must be lValue
error then see this answer: 如果使用webstorm并看到“ Must be lValue
错误,请参见以下答案:
For such binding expressions you need to split the property and event binding like: 对于此类绑定表达式,您需要拆分属性和事件绑定,例如:
[ngModel]="phone_numbers[0]?.full_number"
(ngModelChange)="phone_numbers?.length && phone_numbers[0] ? phone_numbers[0].full_number=$event : null"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.