Угловая; Как повторно визуализировать данные компонента, когда я обновляю переменную в скрипте. Связывание данных работает, но не обновляется - PullRequest
Новая
       132

Угловая; Как повторно визуализировать данные компонента, когда я обновляю переменную в скрипте. Связывание данных работает, но не обновляется

0 голосов
/ 04 мая 2020

Я пытаюсь обновить текст в промежутке, используя самую последнюю версию Angular. Однако я не совсем понимаю, как перехватывает жизненный цикл и обновляет работу в Angular. Проблема с fileName - я связываю данные, и они получают начальное значение при загрузке страницы. Однако, когда переменная данных обновляется, я вижу изменения в консоли, но сам компонент не обновляется.

Должен ли я использовать некоторые методы жизненного цикла или что-то еще? Я прочитал: https://angular.io/guide/lifecycle-hooks и не объяснил мне. 

<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.component.html',
  styleUrls: ['./dashboard.component.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)

Пример того, что я вижу: enter image description here

Ответы [ 3 ]

1 голос
/ 04 мая 2020

Ваше имя_файла является массивом, поэтому для его отображения необходимо выполнить итерацию в файле. 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>

Рабочая демоверсия: демоверсия

1 голос
/ 04 мая 2020 

 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>
0 голосов
/ 04 мая 2020

Пожалуйста, попробуйте внедрить onPush или ChangeDetectionStrategy в свой компонент

. При этом Angular будет запускать обнаружение изменений на этих компонентах и ​​их поддереве, только когда им передаются новые ссылки. по сравнению с тем, когда данные просто видоизменяются.

Запустите this.ref.markForCheck() или this.ref.detectChanges(), когда вы обновите переменную и хотите, чтобы она отображалась в html

Пожалуйста, проверьте следующие ссылки для получения дополнительной информации

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

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

...