Question

我想从primeng p-dialog组件上传文件。但是提交按钮没有做任何事情。控制台中没有抛出异常。我已经搜索了很多关于primeng p-dialog问题的内容，这是我得到的最接近的问题。 page 但是appendTo =“body”对我来说也不起作用，我不知道如何做“componentsnetref”的事情。我不是在做任何嵌套的东西。对我来说这很简单。

我正在使用角度5.0.3和primeng 5.0.2

Html代码：

export class MyComponent implements OnInit {

  showImportDialog = false;

  constructor() {
  }

   import() {
    this.showImportDialog = true;
  }
}

TS代码：

Company

这有什么问题？

Answer 1

Html代码：

     <div class="container-fluid" style="margin-top:10px;">
          <div class="row">
            <div class="col-sm-6 pull-right">
              <div class="row">
                <div class="col-sm-12 text-right">
                  <a class="btn btn-primary"
                     (click)="import()"
                     aria-label="Settings">
                    Import
                    <i class="fa fa-pencil" aria-hidden="true"></i>
                  </a>
                  <a class="btn btn-danger"
                     href="/myapp/export.json"
                     aria-label="Settings">
                    Export
                    <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <p-dialog appendTo="body"
                    [(visible)]="showImportDialog"
                    modal="modal" width="400" height="200"
                    header="Import File"
                    [closable]="true" [showHeader]="true">
            <div class="container-fluid">
              <form (submit)=onSubmit()>
                <p>
                  <span>Upload : &nbsp;</span> 
    <input type="file" #file name="data" id="fileUpload" (change)="onChange(file.files)">
                  <br>
                  <button type="submit">Import </button>
                </p>
              </form>
            </div>
          </p-dialog>  
        </div>

TS代码：

    export class MyComponent implements OnInit {

      showImportDialog = false;
      // Will upload only one file at a time
      // You can have an File[] here if you want to upload multiple files
      uploadFile: File; 

      constructor(private httpClient: HttpClient) {
      }

       import() {
        this.showImportDialog = true;
      }

      onChange(files) {
        this.uploadFile = files[0];
      }

      onSubmit(){
        const formData: FormData = new FormData();
        formData.append('data', this.uploadFile, this.uploadFile.name);

       return this.httpClient.post<MyDTO>('/myapp/upload', formData).map(
        (response) => {
        console.log('Response>' + JSON.stringify(response, null, ' '));
        return response;
         }
        );
     }

primeng p-dialog表单提交不起作用

1 个答案: