Question

我正在看视频教程，并以角度的方式遇到了这段代码-

import{Component} from '@angular/core';
component({
selector: 'course',
template: `
<input [value]="email" (keyup.enter)="onKeyUp()"/>`
})

export class CourseComponent{

email="me@example.com";

onKeyUp(){

console.log(this.email)
}
}

现在输入元素（模板中）中的电子邮件与类中声明的电子邮件不同。当我们执行console.log（this.email）时，它将利用输入字段email的价值（当我们在前端输入框输入电子邮件时））。我需要了解完成console.log（this.email）后，如何显示来自input元素的电子邮件（它不应该显示类中给出的电子邮件吗？）。这种映射在输入元素电子邮件和类内部声明的电子邮件之间是如何发生的。我认为这与类概念有关，但我无法理解。详细的说明会有所帮助。预先感谢

Answer 1

这就是我们所说的Two-way Data Binding。

您指定的行email="me@example.com";是将数据初始化为email变量的位置，并且此变量绑定在<input [value]="email" (keyup.enter)="onKeyUp()"/>中，因此，每当更改电子邮件变量中的数据时，都会影响组件脚本。

Answer 2

这将仅打印在创建组件时分配的初始值“ me@example.com”。由于它只是一种绑定方式，因此不会从“ input”标记中打印您的更新值。您也可以通过更新“电子邮件”值在控制台中对其进行检查。这就是所谓的：元素属性绑定或从数据源到视图目标的单向绑定。

要查看从“视图到组件”和“组件到视图”的反之亦然，您需要添加双向绑定“ [[）]”。

angular-类中的字段如何映射到html模板中的标签

2 个答案: