javascript - Angular; how to re-render component data when I update variable in script. Binding data is working, but not updatin

admin管理员组

文章数量:1415673

I'm trying to update the text in the span, using the latest Angular. However, I do not understand clearly how lifecycle hooks and update work in Angular. Issue is with fileName - I bind the data and it gets the initial value when the page loads. However when the data variable updated, I can see changes in the console, but the ponent itself is not updated.

Shall I use some Lifecycle methods or something else? I've read: and didn't make clear for me.

<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>

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboardponent.html',
  styleUrls: ['./dashboardponent.scss']
})


export class DashboardComponent implements OnInit {
  constructor(
    private http: HttpClient,
     private toastr: ToastrService) { }
  urlApi = '//myuri api';
  respond;
  fileName: Array<any> =['Test']


 onFileSelected(event) {
    //console.log(event.target.files[0].name)
    let name = event.target.files[0].name;
    this.fileName.push(name)
    console.log(this.fileName)

Example of what I see:

I'm trying to update the text in the span, using the latest Angular. However, I do not understand clearly how lifecycle hooks and update work in Angular. Issue is with fileName - I bind the data and it gets the initial value when the page loads. However when the data variable updated, I can see changes in the console, but the ponent itself is not updated.

Shall I use some Lifecycle methods or something else? I've read: https://angular.io/guide/lifecycle-hooks and didn't make clear for me.

<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>

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.ponent.html',
  styleUrls: ['./dashboard.ponent.scss']
})


export class DashboardComponent implements OnInit {
  constructor(
    private http: HttpClient,
     private toastr: ToastrService) { }
  urlApi = '//myuri api';
  respond;
  fileName: Array<any> =['Test']


 onFileSelected(event) {
    //console.log(event.target.files[0].name)
    let name = event.target.files[0].name;
    this.fileName.push(name)
    console.log(this.fileName)

Example of what I see:

• javascript
• angular
• data-binding
• render

Share Improve this question Follow edited May 4, 2020 at 8:47 Volodymyr RT asked May 4, 2020 at 8:28 Volodymyr RTVolodymyr RT 35711 gold badge55 silver badges1313 bronze badges 2

• Do you not see anything? Or does it say [object Object]? A stackblitz with a minimal reproducible example may also help. – user13258211 Commented May 4, 2020 at 8:36
• I see 'Test'. When I add picture I see array of 2 items in the console, but still Test on the render. I updated the post and attached the picture to it. – Volodymyr RT Commented May 4, 2020 at 8:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Your fileName is an array so to display it you have to iterate it in .html file or you can change fileName to string and do as shown below.

export class AppComponent  {
  fileName="Test";

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

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

.html file

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

Working Demo : demo

 fileName : Array<any> = [];


  onFileSelected(event){
console.log(event.target.files[0].name)
let name = event.target.files[0].name;
    this.fileName.push(name)
    console.log(this.fileName)
  }

<input type='file' id="image_uploads" (change) ='onFileSelected($event)' class='input-button' multiple>
<span   *ngFor="let list of fileName">{{list}}</span>

Please try to implement onPush or ChangeDetectionStrategy in your ponent

Doing this will instruct Angular to run change detection on these ponents and their sub-tree only when new references are passed to them versus when data is simply mutated.

Run this.ref.markForCheck() or this.ref.detectChanges() when you update your variable and want it to reflect in html

Please check the following links for more information

https://angular.io/api/core/ChangeDetectionStrategy

https://alligator.io/angular/change-detection-strategy/

本文标签：