【问题标题】:list of events for ngModel in two-way data binding双向数据绑定中 ngModel 的事件列表
【发布时间】:2017-06-23 15:55:30
【问题描述】:

在双向数据绑定中使用ngModel

<input [(ngModel)]="this.name" >

其实是

<input [value]="this.name" (input)="this.name=$event.target.value>

所以ngModel 在内部将(input) 事件的&lt;input&gt; 映射到this.name

在哪里可以找到有关 ngModel 为 &lt;p&gt; 等其他元素生成的事件的信息?

我想在点击&lt;p&gt; 时增加&lt;p&gt; 的字体。没有ngModel 我可以做到,但没有ngModel 就不行

没有ngModel

<p [style.font-size.px]="this.fontsize" (click)="handleParaClick()">Hello {{this.paratext}} {{this.fontsize}}  </p>

  handleParaClick():void{
    this.fontsize+=10;
  }

但我做不到

<p [(style.font-size.px)]="this.fontsize" >Hello {{this.paratext}} {{this.fontsize}}  </p>

我猜对于&lt;p&gt;,要么ngModel 不做任何事情,要么不生成(click) 事件

【问题讨论】:

  • 我不确定您对 NgModel 的理解,以及单击 p 中的句柄有何帮助。 [(ngModel)] 实际上是 [ngModel](ngModelChange)。你在没有ngModel 的情况下所做的事情是正确的,也是唯一的方法。除非您创建自定义指令。
  • 我相信 (ngModelChange) 会在 DOM 发生变化时发出。 DOM 中的哪些变化导致 Angular 发出 ngModelChange?我假设何时发出 ngModelChange 取决于我们使用 ngModel 的元素。在“输入”元素中,如果输入,它可能会改变值。如果正确,我在哪里可以找到 Angular 会针对哪些元素发出 ngModelChange 以及哪些更改?
  • 不,ngModelChange 建议将在分配给 ngModel 的参数更改时触发。您是从哪里读到这些概念的?
  • 但是如果只在 ngModelChange 中触发 param 的变化,那么这将是 1-way binding。当分配给它的 HTML 元素(DOM 元素)的某些属性发生更改时,ngModelChange 也应该被触发,以便可以更新参数。在&lt;input [value]="this.name" (input)="this.name=$event.target 中,name 中的更改由于更改检测而更新值(不知道这在 Angular 内部是如何工作的)以及当&lt;input&gt; 中的value 更改(DOM 属性更改)时,可能会触发 ngModelChange。
  • 你同意吗 - &lt;input [(ngModel)]="this.name" &gt;&lt;input [value]="this.name" (input)="this.name=$event.target.Does Angular convert the first statement into 2nd one automatically? If so, then somewhere is it hardwired that ngModel with ` 保持 value 和属性同步(当属性值更改时 &lt;input&gt; value 得到更新并且当 (input) 事件发生了,属性发生了变化?我的问题是我可以将 ngModel 用于哪些其他元素?我可以将它与
  • 一起使用吗?这些元素中的更改事件会触发 ngModelChange?我在哪里可以找到这些信息?

标签: angular ngmodel two-way-binding


【解决方案1】:

试试这个

<p [ngStyle]="{'font-size': this.fontsize}">...</p>

这不是双向数据绑定,而是动态放置包含变量 this.fontsize 的字体大小值

【讨论】:

  • 谢谢。我的问题不是要实现更改段落的字体,而是要了解我在哪里可以和不能使用 ngModel
猜你喜欢
相关资源
最近更新 更多
热门标签