Обновить список таблиц после загрузки файла в угловых

Question

В нашем приложении для загрузки есть 3 вкладки - Домой, Загрузить, Список файлов.Мы создали отдельные компоненты для 3 вкладок.После загрузки файла вам необходимо обновить всю страницу, чтобы увидеть изменения.Он должен автоматически обновить список таблиц после загрузки.

uploadlist.component.ts

  ngOnInit() {
    this.getFileList();
    };

  getFileList() {
    this.showError = false;
     this._uploadlistService.getFiles().subscribe((costSpreadsheet) => {
      console.log(costSpreadsheet);
      this.costSpreadsheet = costSpreadsheet;
      this.showLoader = false;
      },
      (error) => {
        console.log('Error fetching file list');
        this.response = error;
        this.showLoader = false;
        this.showError = true;
      });
  }

upload.component.ts

onSubmit() {
    this.response = ('Please select a file first. ');
    this.showError = true;
    if (this.fileToUpload.name != null){
      this.showLoader = true;
      this.showSuccess = false;
      this.showError = false;
      console.log(this.fileToUpload.name);
      this.fileUploadService.fileUpload(this.fileToUpload)
        .subscribe( data => {
          console.log('Successful upload');
          this.response = 'Upload Successful';
          this.showLoader = false;
          this.showSuccess = true;    
        },
        (error) => {
          console.log('Error Uploading file');
          this.response = error;
          this.showLoader = false;
          this.showError = true;
        }
      );
    }
  }

uploadlist.service.ts

  getFiles(): Observable<CostSpreadsheet[]> {
    return this._http.get<CostSpreadsheet[]>(this.uploadUrl + "/spreadsheet/" + this.uploader)
    .pipe(catchError(this.handleError<any>('getFiles')));
  }

Я пыталсяскопировать содержимое метода getFileList () в upload.component.ts, чтобы он обновил список файлов после загрузки.Он обновляет список (в бэкэнде), но вид остается прежним.

Я получаю данные из базы данных db2, и мы используем загрузочный Spring для внутреннего кода.Я получаю его с помощью переменной costSpreadsheet, и у меня также есть файл модели в угловом формате, в котором он определяет важные данные, которые мне нужны из бэкэнда, такие как имя файла, общее количество записей и общее количество.

Answer 1

В вашем uploadlist.component.ts метод getFiles вызывается только один раз, поэтому ваш список не обновляется.

Самый простой способ - уведомить список об обновлении его содержимого.

Для этого вы можете использовать тему:

uploadlist.service.ts

public updateList$: Subject<void> = new Subject();

Позвоните .next() на эту тему в вашем upload.component.ts после успешной загрузки файла.

И в вашем uploadlist.component.ts:

ngOnInit() {
    this.getFileList();

    this. _uploadlistService.updateList$.subscribe(() => {
        this.getFileList(); // Get the current files
    });
 }

В противном случае, вместо того, чтобы снова и снова вызывать getFileListe, вы можете испустить загруженный файл через вашу темуи обновите массив CostSpreadsheet.

Answer 2

Из предоставленного кода очень трудно понять, какая переменная связана с данными, которые вы пытаетесь отобразить.

Когда вы получаете данные от подписки, вы должны сделать это:

this.someservice.subscribe((data) => {
    this.myDataToDisplay = data
})

Вы можете подписаться на несколько компонентов, поэтому все ваши компоненты, представляющие вкладки, должны подписываться таким образом, а когда служба выдает новые данные, все компоненты должны обновляться.Вы должны подписаться внутри метода ngOnInit каждого компонента.

Если компоненты не существуют, так что они не прослушивают, когда служба генерирует новые данные, тогда вы можете рассмотреть возможность использования субъекта поведения RxJS внутри вашей службы.или используйте глобальное решение для магазина, такое как ngrx store.