Question

我正在尝试制作一个搜索栏来在我的应用中搜索用户。我已经创建了一个方法来做到这一点，在 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 方法中做错了什么？谢谢！

Answer 1

试试这个

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>

搜索栏未返回预期结果

1 个答案: