Question

目标：用户上传带有两个字段PersonNumber和Username的csv文件。程序应该读取内容并在页面上生成一个表。截至目前，这是我所做的，我没有做任何服务器端的帖子或得到。现在这只是Angular。

组件：ToolTrialComponent - tooltrial.component.ts 模板：tooltrial.component.html

我能够使用主要组件类中的下面的方法提取csv文件中的数据/内容 - ToolTrialComponent文件上传功能很少有其他功能可以使用，但大部分功能都是从MDBootstrap PRO版本中使用的文件输入类，它的工作原理。

onFileChange(event) {
  const reader = new FileReader();

  if (event.target.files && event.target.files.length > 0) {
    const file = event.target.files[0];
    reader.readAsText(file);
    reader.onload = () => {
      this.tool1trialform.get('filedetails').setValue({
        filename : file.name,
        filetype : file.type,
        filevalues : reader.result
      });
    };
  }

我的模板中有两行显示我从方法中获得的内容。

<div>
     <p>{{tool1trialform.value | json}}></p>
     <p>{{tool1trialform.status | json}}></p>
</div>

所以filevalues键将csv的内容作为我感兴趣的字符串。现在我尝试使用选择器和模板创建一个组件，访问filevalues变量，解析字符串并将其显示在表中。问题是我不知道如何从其他类似的组件类访问filevalues或tool1trialform.value。（对于我在Angular中使用ReactiveFormsModule的表单。

    @Component({
  selector: 'app-data-table',
  template: `<div class="verticalcenter text-center">
  <table class="table">
        <thead class="pink darken-4 lighten-1 white-text">
          <tr>
            <th>PersonNumber</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{datastring1}}</td>
                <td>{{datastring2}}</td>
            </tr>
            <tr>
                <td>{{datastring3}}</td>
                <td>{{datastring4}}</td>
            </tr>
        </tbody>
    </table></div>`
})

我打算使用* ngFor来填充表格中的行，但是现在我只是硬编码了数据字符串以显示显示方式。

export class PrintDataComponent {
  datastring1 = '162415';
  datastring2 = 'AB_TEST_USER_1@company.com';
  datastring3 = '160869';
  datastring4 = 'AB_TEST_USER_2@oracle.com';
}

如果这是我遵循的方法，并且我能够使用PrintDataComponent类中的方法访问和解析filevalues字符串，则下一步将只是插入tooltrial.component.html模板中的行以显示表

<div><app-data-table></app-data-table></div>

我还尝试使用提交按钮的onclick事件从上面方法中的filevalues变量访问filecontent值，但我无法这样做。是否有另一种方法在Angular中我应该遵循以实现这一点，或者这个问题中提到的方法应该让我到达我想要的位置。上传csv文件 - ＆gt;读取数据 - ＆gt;在表格中显示基于哪些进一步的数据处理将被上传的内容，并最终使用该工具将处理过的文件通过电子邮件发送给此人。

希望我能解释自己。任何帮助都会非常感激。

ng - v (Angular version details for this build I am working on)

Angular CLI: 1.6.1
Node: 8.9.3
OS: win32 x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

使用Angular

0 个答案: