Question

要求this question询问如何在尚未定义变量时保护[(ngModel)]="currentService.user.username"，请提供以下answer：

<input [(ngModel)]="currentService.user && currentService.user.username">

起初，我认为这不起作用，因为绑定表达式在作业中不是有效的左侧：

(this.currentService.user && this.currentService.user.username) = "Bob"; // Not valid

但是，Pardeep Jain提供了一个演示，表明它确实有效：变量currentService.user.username一旦定义就绑定到输入元素。 This stackblitz是他演示的分叉版本。

我的问题：以这种方式绑定一个条件表达式[(ngModel)]应该起作用，或者它是否只能起作用＃34;意外＆＃34;并可能会停止在Angular的未来版本中工作？

Answer 1

这不是关于Angular的，这是关于JS的。

请看这个片段：

＆＃13;

const variable = {
  user: {
    name: 'John Doe'
  }
};

console.log(variable);
console.log(variable.user);
console.log(variable.secondUser);
console.log(variable.user.name);
console.log(variable.secondUser.name);

＆＃13;

如您所见，它测试变量是否已定义。当您尝试访问undefined变量的属性时，将引发错误。

在您的情况下会发生的情况是，如果错过第一个条件，则不会测试其他条件。

请看这个片段：

＆＃13;

const variable = {
  user: {
    name: 'John Doe'
  }
};

console.log(variable && variable.user && variable.user.name);
console.log(variable && variable.user && variable.user.surname);
console.log(variable && variable.secondUser && variable.secondUser.name);

＆＃13;

这一次，不会抛出任何错误。 stackoverflow question教我这个。

第二点，&&运算符返回最后一个表达式的值，如果该表达式是真实的或虚假的。看看这个片段：

＆＃13;

const variable = {
  user: {
    name: 'John Doe'
  }
};

console.log(variable && variable.user && variable.user.name);
console.log(variable && variable.user && variable.user.surname);
console.log(variable && variable.user && !!variable.user.name);
console.log(variable && variable.user && !!variable.user.surname);

＆＃13;

如您所见，如果最后一个条件不是布尔值，它将返回条件的值。

顺便说一句，在Angular中，您可以使用Elvis operator，这样可以缩短语法（但您无法在模板驱动的表单中使用）：

<input *ngIf="currentService?.user?.username">

Answer 2

IMO，数据绑定表达式在下面的行中是正确的 -

<input [(ngModel)]="currentService.user && currentService.user.username">

因为当您将ngModel绑定到这样的表达式（currentService.user && currentService.user.username）时，它将在场景后面检查第一个值，一旦它可用，它将查找第二个值，如果存在角度将你的值绑定到ngModel else绑定第一个。

（this.currentService.user＆amp;＆amp; this.currentService.user.username）=＆＃34; Bob＆＃34 ;; //无效

这不是一个有效的语法，因为在这里您要为某个需要强烈描述的变量赋值我的意思是this.currentService.user.username或this.currentService.user不使用&& seprator。

但是如果你这样写的话是的

this.bob = this.currentService.user && this.currentService.user.username // will be valid - here this.bob is some variable

希望你明白我的意思，如果有任何困惑让我知道。

与[（ngModel）]绑定的条件表达式

2 个答案: