在订阅函数中设置变量时更新Angular6中的视图

Question

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

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

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

当我单击“选择类”按钮时，我正在调用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}}" />

可能是什么问题呢？

请帮我解决一下这个。

Answer 1

使用[ngModel]代替value ：

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

Answer 2

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

更改为：

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