【问题标题】:angular2 two-way binding doesn't updated as I enter the string当我输入字符串时,angular2双向绑定没有更新
【发布时间】:2017-07-09 08:37:32
【问题描述】:

我是 angular2 的新手,我希望有人可以帮助我解决为什么我的双向绑定不起作用的基本问题。我的 html 中有这个超级简单的代码,我在module.ts 中添加了以下代码:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule} from '@angular/forms';

in html:
<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

我遇到的问题是,当我在输入框中输入字符串时,"Hello {{username}}" 没有得到更新。但是,当我在输入框外单击时,"Hello {{username}}" 将使用输入的值进行更新。

请让我知道我在这里缺少什么魔法:(。谢谢

【问题讨论】:

  • 浏览器控制台是否出现错误?
  • 尝试创建一个新的ng app ng new my-app 然后将html input 粘贴到app.comonent.html 中,看看其余代码与您的应用有何不同。默认情况下为我工作ng app
  • 您是否在您的 .ts 文件中声明了“用户名”?在 .ts 文件中创建一个变量它将起作用
  • 我终于找到了答案,显然更改检测由于某种原因没有开始。所以我不得不手动调用更改检测,然后绑定工作

标签: angular input data-binding ngmodel


【解决方案1】:

我遇到了同样的问题。 对我来说,解决方案是使用“字符串”而不是“字符串”作为数据类型。

【讨论】:

    【解决方案2】:

    我觉得你需要加ngModelOptions或者name

    <input [(ngModel)]="username" [ngModelOptions]="{standalone: true}">
    

    <input [(ngModel)]="username" name="username">
    

    【讨论】:

    • 感谢您的回答。它们都不起作用。我真的不知道为什么
    • 即使没有ngModelOptionsname plnkr.co/edit/LuPcLfQ8Hzrn3G0qXAYw?p=preview 也能正常工作
    • 你是对的,不幸的是我的代码库不能正常工作,它需要额外的点击来更新字符串。
    • 我看不到从这里诊断它的方法。如果您可以更新 Plunker 以使其重现您的问题,我可以再看看。
    • 我正在对处于混合状态(angularjs 和 angular)的大型代码库进行更改。我拥有的 angular2 组件将降级为 angularjs 以在混合应用程序中使用。您是否怀疑由于混合应用程序而导致事件检测和绑定面临困难?
    猜你喜欢
    • 2019-12-29
    • 2017-02-06
    • 1970-01-01
    • 2017-09-04
    • 1970-01-01
    • 2015-08-08
    • 2016-08-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多