Javascript 有棱角的如何在脚本中更新变量时重新渲染组件数据。绑定数据正在工作，但未更新

我正在尝试使用最新的角度更新跨度中的文本。然而，我不清楚生命周期挂钩和更新是如何在Angular中工作的。问题在于

fileName

-我绑定数据，并在页面加载时获取初始值。但是，当数据变量更新时，我可以在控制台中看到更改，但是组件本身没有更新

我应该使用一些生命周期方法还是其他方法？ 我读过：但没有给我讲清楚

<form (ngSubmit)="putToBucket()" class='form-class' >
  <label for="image_uploads" >Select Image</label>
  <input type='file' id="image_uploads" (change) ='onFileSelected($event)' class='input-button' multiple>
  <span  > {{fileName }} </span>
  <button class='submit-button' type='submit' >Submit</button> 
</form>

选择图像
{{fileName}}
提交

@组件({
选择器：“应用程序仪表板”，
templateUrl:“./dashboard.component.html”，
样式URL:['./dashboard.component.scss']
})
导出类DashboardComponent实现OnInit{
建造师(
私有http:HttpClient，
私人toastr:ToastrService）{}
urlApi='//MyuriAPI'；
回应
fileName:Array
请尝试在组件中实现
onPush
或
ChangeDetectionStrategy

这样做将指示Angular仅在向这些组件及其子树传递新引用时，而不是在数据发生简单变化时，才对这些组件及其子树运行更改检测

更新变量并希望它反映在html中时，请运行
this.ref.markForCheck（）
或
this.ref.detectChanges（）

请查看以下链接以了解更多信息


请尝试在组件中实施
onPush
或
ChangeDetectionStrategy

这样做将指示Angular仅在向这些组件及其子树传递新引用时，而不是在数据发生简单变化时，才对这些组件及其子树运行更改检测

更新变量并希望它反映在html中时，请运行
this.ref.markForCheck（）
或
this.ref.detectChanges（）

请查看以下链接以了解更多信息


您的文件名是一个数组，因此要显示它，您必须在.html文件中对其进行迭代，或者您可以将文件名更改为字符串，并按如下所示进行操作

export class AppComponent  {
  fileName="Test";

  ngOnInit(){
    console.log(this.fileName);
  }

  onFileSelected(newName){
    this.fileName=newName;
    console.log(this.fileName);
  }
}

.html文件

<button (click)="onFileSelected('newFile')">change file name</button>

更改文件名

工作演示：
您的文件名是一个数组，因此要显示它，您必须在.html文件中迭代它，或者您可以将文件名更改为字符串，并按如下所示进行操作

export class AppComponent  {
  fileName="Test";

  ngOnInit(){
    console.log(this.fileName);
  }

  onFileSelected(newName){
    this.fileName=newName;
    console.log(this.fileName);
  }
}

.html文件

<button (click)="onFileSelected('newFile')">change file name</button>

更改文件名

工作演示：

fileName:Array=[]；
选举（事件）{
console.log（event.target.files[0].name）
让name=event.target.files[0].name；
this.fileName.push（名称）
console.log（this.fileName）
}

{{list}
fileName:Array=[]；
选举（事件）{
console.log（event.target.files[0].name）
让name=event.target.files[0].name；
this.fileName.push（名称）
console.log（this.fileName）
}

{{list}
你没有看到任何东西吗？或者它说的是
[对象对象]
？一个具有最小可复制性的示例可能也会有所帮助。我看到了“Test”。当我添加图片时，我在控制台中看到2个项目的数组，但仍然在渲染时进行测试。我更新了帖子并将图片附加到其中。你没有看到任何东西吗？或者它说的是
[对象]
？一个具有最小可复制性的示例可能也会有所帮助。我看到了“测试”。当我在控制台中添加图片时，我看到了2个项目的数组，但仍然在渲染上进行测试。我更新了帖子并将图片附加到其中。谢谢，它可以将数组更改为字符串。但是，如果我上载多个文件并希望显示所有名称，我应该循环使用*ngFor模块？是的，那么你应该使用*ngFor指令。谢谢，已经使用了。谢谢你的帮助，我的想法是错误的：）谢谢，它可以将数组更改为字符串。但是，如果我上载多个文件并想显示所有名称，我应该使用*ngFor模块？是的，那么你应该使用*ngFor指令。谢谢，alr已经做了。谢谢你的帮助，我想的方向错了：）谢谢，我会检查的。但是对于小文本的重新渲染来说不是太复杂了吗？谢谢，我会检查的。但是对于小文本的重新渲染来说不是太复杂了吗？