[英]Upload search results data in angular with a button click
I am having a project requirement on Angular. 我对Angular有一个项目要求。 I am using search option where I am able to search data from external api and display user below it when clicking on Add button. 我正在使用搜索选项,我可以在外部api中搜索数据,并在单击“添加”按钮时在其下方显示用户。 I tried implementing using angular primeng autocomplete. 我尝试使用angular primeng自动完成实现。
But problem is that as per the screenshot here https://imgur.com/a/wXYqOpM 但问题是,根据这里的截图https://imgur.com/a/wXYqOpM
When I clicked on Upload List, all the user data displayed should be uploaded with a button click (either as file or array). 当我点击上传列表时,所有显示的用户数据都应该通过点击按钮上传(作为文件或数组)。 Since I am new to angular, can you help me to find a suitable solution for the same? 由于我是棱角分明的新手,你能帮我找到合适的解决方案吗?
Thanks in advance Patric 在此先感谢Patric
There's a bit more input needed in order to properly, entirely answer your question. 为了正确地完全回答你的问题,还需要更多的输入。 I'll just make a couple assumptions to do so. 我只想做几个假设。
I suppose that you're having an array of patients/users in your .ts file and display that data in your .html using data interpolation. 我想您在.ts文件中有一组患者/用户,并使用数据插值在.html中显示该数据。 Something like this: 像这样的东西:
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>
Eventually, all you need to do is inject the HttpClient (imported from @angular/common/http) into your component's constructor and use it (preferably in a service, read up in the angular.io docs for that specifically, how to share data between components etc). 最后,您需要做的就是将HttpClient(从@ angular / common / http导入)注入到组件的构造函数中并使用它(最好在服务中,在angular.io文档中读取,具体来说,如何共享数据)组件之间等)。
Roughly outlined, something like this shall work: 粗略概述,这样的东西应该工作:
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
});
}
}
Hope that'll help - Regards 希望这会有所帮助 - 问候
EDIT - moved API call into function which'll be called upon button click 编辑 - 将API调用移动到按钮单击时调用的函数
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.