单击按钮上传 angular 中的搜索结果数据

Question

我有一个关于 Angular 的项目要求。我正在使用搜索选项，我可以从外部 api 搜索数据并在单击“添加”按钮时在其下方显示用户。我尝试使用 angular primeng 自动完成来实现。

但问题是，根据此处的屏幕截图 https://imgur.com/a/wXYqOpM

当我点击上传列表时，显示的所有用户数据都应该通过点击按钮上传（作为文件或数组）。由于我是 angular 的新手，您能帮我找到一个合适的解决方案吗？

提前致谢帕特里克

Answer 1

为了正确、完整地回答您的问题，还需要更多的输入。为此，我将做一些假设。

我假设您的 .ts 文件中有一个 patients/users 数组，并使用数据插值在您的 .html 中显示该数据。像这样：

upload-list.component.ts:
...
public userList = ['Patient 1', 'Patient 2', 'Patient 3']
...

upload-list.component.html:
...
<your-list-display>{{ userList }}</your-list-display>
<button (click)='sendData()'>Upload list</button>

最终，您需要做的就是将 HttpClient（从@angular/common/http 导入）注入组件的构造函数并使用它（最好在服务中使用，请阅读 angular.io 文档了解具体来说，如何在组件之间共享数据等）。

粗略地概括一下，这样的事情应该有效：

upload-list.component.ts:
import { HttpClient } from '@angular/common/http';

...

export class UserList {
  constructor(private http: HttpClient) {}

  public sendData(): void {
    this.http.post<any>(apiURL, this.userList).subscribe(result => {
      ... // do something with the result from your HTTP request.
    }, error => {
      ... // handle error as wished
    });
  }
}

希望对您有所帮助 - 此致

编辑 - 将 API 调用移入将在单击按钮时调用的函数

单击按钮上传 angular 中的搜索结果数据

Upload search results data in angular with a button click

javascript

angular-material

primeng

angular