我正在尝试制作一个搜索栏来在我的应用中搜索用户。我已经创建了一个方法来做到这一点,在 ASP .NET 中工作得很好
public async Task<IEnumerable<MemberDto>> Search(string content)
{
if (string.IsNullOrEmpty(content))
{
return await _context.Users.ProjectTo<MemberDto>(_mapper.ConfigurationProvider).ToListAsync();
}
return _context.Users.Where(e => e.UserName.StartsWith(content) ||
e.FirstName.StartsWith(content) ||
e.LastName.StartsWith(content) ||
(e.FirstName + " " + e.LastName).StartsWith(content))
.ProjectTo<MemberDto>(_mapper.ConfigurationProvider);
}
[HttpGet("search")]
public async Task<ActionResult<IEnumerable<MemberDto>>> SearchUser([FromQuery] string content)
{
var users = await _userRepository.Search(content);
return Ok(users);
}
在我的主页中,我创建了一个带有搜索按钮的搜索栏。编写字符串后,我希望能够按下搜索按钮以返回另一个页面中的所有匹配用户。但是,我无法弄清楚如何做到这一点。这是我的方法:
search(content: string) {
this.memberService.search(content).pipe(
map((response: Member[]) => {
const usernames = response.length;
(term => term === '' ? [] : usernames);
}),
debounceTime(200),
distinctUntilChanged())
console.log(content);
}
我在会员服务中的方法是:
search(content: string) {
return this.http.get<Member[]>(this.baseUrl + 'users/search?content=' + content);
}
这是我的 html:
<form class="example" (ngSubmit)="search(model.content)" style="margin:auto;max-width:300px">
<input id="typeahead-format" name="content" [(ngModel)]="model.content" type="text" class="ml-2
form-control" placeholder="Caută utilizatori"/>
<button class="d-flex align-items-center justify-content-center" routerLink="search?=
{{model.content}}" type="submit"><i class="fa fa-search"></i></button>
</form>
我也在 vendor.js 和 main.js TypeError: Cannot read property 'requestContent' of undefined
中收到错误
我在 TypeScript 方法中做错了什么?谢谢!
答案 0 :(得分:0)
试试这个
search(content: string) {
this.memberService.search(content).subscribe(response: Member[] => {
const usernames = response;
term = term === '' ? [] : usernames;
}),
debounceTime(200),
distinctUntilChanged())
console.log(content);
}
搜索栏的 HTML 代码
<input placeholder="Search" (keyup)="search(model.content)">
检查成员是否返回的代码
search(content: string) {
const data = this.http.get<Member[]>(this.baseUrl + 'users/search?
content=' + content);
console.log(data);
return data;
}
自动完成
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let username of usernames" [value]="option">
{{username}}
</mat-option>
</mat-autocomplete>