Присвойте пользовательскому имени файла экспорт в p-таблицу - PullRequest
0 голосов
/ 30 марта 2020

Я использую таблицу primeng в своем приложении angular. Я пытаюсь назначить добавить экспорт файла CSV с текущим временем, когда пользователь экспортирует содержимое таблицы. Однако при первом экспорте имя файла не обновляется со временем. В следующий раз это работает, но к имени файла добавляется предыдущий раз. Я предполагаю, что имя файла экспорта использует более старое имя файла, а не обновленное. Не знаю, почему это происходит. Я вызываю метод setFile, когда я делаю экспорт. Это должно занять обновленное имя файла. Пожалуйста, помогите. Спасибо заранее.

Вот мой код шаблона:

<p-table [columns]="cols" #dt [value]="students" [autoLayout]="true"  exportFilename={{testFileName}}>
        <ng-template pTemplate="caption">
            <div >
                <button  mat-icon-button type="button" (click)="setFileName();dt.exportCSV()" style="float:right"><mat-icon>save_alt</mat-icon></button>
            </div>
        </ng-template>
    </p-table>

Мой машинопись:

  students: any[];
  cols: any[];

  testFileName = 'SampleFile';
  constructor(private studentService: StudentService) { }

  ngOnInit() {
    this.studentService.getAllStudents().subscribe(data => this.students = data);

    this.cols = [
      { field: 'name', header: 'Name' },
      { field: 'rollNo', header: 'RollNo' },
      { field: 'class', header: 'Class' },
    ];
  }



setFileName() {
    this.testFileName = 'StudentDetailsExport' + '_' +
      new DatePipe('en-US').transform(Date.now(), 'MMM_dd_yyyy_hh_mm_ss', 'UTC') + 'Z';

  }

1 Ответ

0 голосов
/ 30 марта 2020

Получить ссылку на элемент

@ViewChild('dt') dt: Table;

и задать имя файла, используя this.dt.exportFileName, а затем dt.exportCSV () для экспорта.

setFileName() {
    this.dt.exportFileName = 'StudentDetailsExport' + '_' +
      new DatePipe('en-US').transform(Date.now(), 'MMM_dd_yyyy_hh_mm_ss', 'UTC') + 'Z';
   this.dt.exportCSV();
  }

HTML - только вызов Функция setFileName ()

<button  mat-icon-button type="button" (click)="setFileName()"></button>

Stackblitz: https://stackblitz.com/edit/angular-ptable-io6vjb

...