Question

我正在使用Angular 4.3.6，我的项目是使用Angular CLI设置的。

我的问题在于组件/服务交互。 I have made a plunker that demonstrates it如果有人能解释问题是什么，我会很高兴，因为我很难过。

我有一个以<input type='text' [value]='labelStr'>为特征的组件，其中labelStr是该组件的属性我还有一个声明BehaviourSubject的服务。第一个组件订阅了这个主题。

当您单击该字段时，输入一些新文本然后单击“离开”，您键入的字符将发送到服务。在此示例中，服务仅接收输入，然后通过主题将其发回。

组件通过其订阅收到通知，并将labelStr属性更新为字符串 Foo 预先设置的接收值。

大部分时间它按预期工作 - 键入一些字符，点击，值更新为 Foo [你的字符] 。当您输入文本，单击然后单击返回并再次输入相同的文本时，会出现问题。在这种情况下，价值似乎没有更新，对于我的生活，我不明白为什么不。我真的希望能够很容易地解决这个令人尴尬的事情如果我不能很好地解释自己，请大声喊。

感谢您提供的任何帮助。

Answer 1

如果您使用ngModel而不是value，问题将得到解决（在plunker本地确认），因为它会自动强制双向绑定。这些是我所做的改变。

首先将FormsModule导入app.ts，

import {FormsModule} from '@angular/forms'

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App, InputWidgetComponent],
  bootstrap: [ App ],

})
export class AppModule {}

在input-widget.ts中，将input的模板更改为

<input type="text" [(ngModel)]="labelStr"
    (focus)="handleFocus($event)"
    (blur)="handleBlur($event)">

希望有所帮助

通过服务更新绑定组件值时出现意外结果

1 个答案: