当我们在订阅函数中设置变量时更新Angular6中的视图答案

【问题标题】：Update view in Angular6 when we set variable in subscribe function当我们在订阅函数中设置变量时更新Angular6中的视图
【发布时间】：2018-08-03 07:34:56
【问题描述】：

呈现文件的第一个组件选择 html

当我点击浏览按钮时，我重定向到另一个组件 Fileselect 组件，这是第二个组件 this.goto('fileselect');

问题是当我从文件组件中选择一个文件时，我必须在第一个组件的输入字段中显示它

当我点击 Select class 按钮时，我正在调用 redirect() 函数。

在文件选择组件中，我使用服务将文件名传递给第一个组件，如下面的代码所示

 redirect(){
  this._messageService.filter(this.selectedFile);
  this.router.navigateByUrl('');

}

在我想要这个文件名的第一个组件中，我已经订阅了如图所示的功能

ngOnInit() {
   this._messageService.listen().subscribe((m:any) => {
            this.fileName = m
            this.loadXMLasJSON()
            console.log(this.fileName)

});}

当我在 console.log 获取文件名时，我在订阅函数中分配变量 this.fileName。但是视图没有更新。

我的查看代码

 <input type="text"  class="form-control image-preview-filename" value="{{fileName}}" />

可能是什么问题？

请帮帮我。

【问题讨论】：

this.fileName的值是多少？
这是我选择的文件名，例如example.xml
我建议更喜欢 ngModel 和 second 来更新视图，在构造函数和订阅方法中注入 Changedetectorref，使用 Changedetectorref 中的 markForCheck() 或 detectChanges() 方法。在分配文件名的值后调用这些方法之一
@SumeetKale 当我这样做时，我得到错误 ViewDestroyedError: Attempt to use a destroyed view: detectChanges
知道了。我猜你的导航方法是错误的。您使用的是普通路由器插座还是命名路由器插座。我认为您可以使用命名路由器插座解决此问题。您可以在其中导航命名路由器出口中的文件选择路由，这应该可以防止您的第一个组件在导航时不被破坏

标签： angular angular4-router

【解决方案1】：

使用[ngModel] 代替value：

<input type="text"  class="form-control image-preview-filename" [ngModel]="fileName" />

【讨论】：

【解决方案2】：

请从 value 属性中删除 双引号。

更改为：

<input type="file" class="form-control image-preview-filename" value={{fileName}} />

【讨论】：

完成，没有任何区别
然后尝试 [(ngModel)]
将输入类型从文本更改为文件。希望它会工作。 :)