Angular: 搜索过滤器 rxjs

Question

我实现了它在输入按钮中按名称查找的功能但是我遇到了一个问题，我在那里设置了一个条件，我希望此时输入为空，这样它就会变成 false 并显示我的所有数据。

现在，一旦 INPUT 为空，我就写了一条消息“未找到”：

我想要的是，一旦输入为空，它就会向我显示所有数据，如果它不为空，则会向我显示适当的数据，或者如果它不存在，则会向我显示找不到：

我的界面：

export interface Post{
    id:number,
    date: Date,
    authorName:string,
    content:string;
}

我的种子日期：

  createDb() {
    const posts: Post[] = [
      {id:1,authorName:"Daniel",content:"Amazon’s Garage Delivery Service"
      ,date:new Date('11/12/20')
    },
      {id:2,authorName:"Omer",content:"Jake From State Farm "
      ,date:new Date('12/20/21')},
      {id:3,authorName:"Lior",content:"The General"
      ,date:new Date('02/01/22')},
      {id:4,authorName:"Tomer",content:"Spotify’s Wrapped "
      ,date:new Date('11/11/20')},
    ];
    return {posts};

html:

<input
  type="search"
  (input)="SearchPostsByName($event)"
  [(ngModel)]="authorName"
/>
<div *ngFor="let post of validPosts">
  <ng-container *ngIf="isExists">
    The name of the author is <b>{{ post?.authorName }}</b> with content
    <b>{{ post?.content }}</b> and released it on the date
    <b>{{ post?.date }}</b>
  </ng-container>
</div>
<br>

打字稿：

posts: Post[] = [];
   authorName = "";
   content = "";
   date = new Date();
   isExists = false;
   validPosts: Post[] = [];
   Search:string=''; 

  constructor(private postService: PostService) { }

  ngOnInit(): void {
    this.postService.getPosts().subscribe((posts)=> {
      this.posts = posts;
    });
  }
  
  SearchPostsByName($event : Event) {
    console.log($event);
    if (this.authorName) {
      this.validPosts = this.posts.filter((value) => value.authorName === this.authorName!); 
      if (this.validPosts.length > 0
      ) {
        console.log('found');
        this.isExists = true;
      } else {
        this.isExists = false;
      }
    }
  }

我的服务：

export class PostService {

  private postsUrl = 'api/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(this.postsUrl);
  }

  addPost(post: Post): Observable<Post> {
    let httpOptions = {
      headers: new HttpHeaders({'Content-Type':'application/json'})
    };
    
    return this.http.post<Post>(this.postsUrl, post, httpOptions)
  }

Answer 1

我认为最大的错误是您忘记在 ngOnInit 中初始化 validPosts，这解释了为什么您在开始时没有看到任何 post：

  ngOnInit(): void {
    this.postService.getPosts().subscribe((posts) => {
      this.posts = posts;
      this.validPosts = posts;
    });
  }

如果你想在空搜索中显示所有post，你可以检查搜索关键字是否为空字符串，如果是，则将你的validPosts设置为posts:

    const searchKey = ($event.target as HTMLInputElement).value;

    if (searchKey === '') {
      this.validPosts = this.posts;
      return;
    }

应该是这样！

如果您想进一步改进，我还有其他一些建议：

像这样的简单搜索不需要使用双向数据绑定，只需按搜索关键字过滤 posts 就可以了。
您不必创建 isExists 变量来跟踪是否有任何 validPosts，因为它是一个数组，您可以检查它的长度。
您可以创建一个模板来显示空 post html

  SearchPostsByName($event: Event) {
    const searchKey = ($event.target as HTMLInputElement).value;

    if (searchKey === '') {
      this.validPosts = this.posts;
      return;
    }

    this.validPosts = this.posts.filter(
      (value) => value.authorName === searchKey
    );
  }

<input type="search" (input)="SearchPostsByName($event)" />
<ng-container *ngIf="validPosts.length; else emptyPostTpl">
  <div *ngFor="let post of validPosts">
    The name of the author is <b>{{ post?.authorName }}</b> with content
    <b>{{ post?.content }}</b> and released it on the date
    <b>{{ post?.date }}</b>
  </div>
</ng-container>
<br />

<ng-template #emptyPostTpl>
  <span style="font-size: 1rem; font-weight: bold; display: block"
    >No post found</span
  >
</ng-template>

想更进一步吗？

查看 onPush 更改检测以提高性能。
学习 RXJS 并实现去抖动搜索！

Answer 2

我建议您用 keyup.

替换 input 事件

<input
  type="search"
  (keyup)="SearchPostsByName($event)"
  [(ngModel)]="authorName"
/>

在 SearchPostsByName($event) 中，查询 event$.target.value 检查是否有任何输入：

SearchPostsByName($event : Event) {

    if(!$event.target.value.length) {
      return;
    }
    if (this.authorName) {
      this.validPosts = this.posts.filter((value) => value.authorName === this.authorName!); 
      if (this.validPosts.length > 0
      ) {
        console.log('found');
        this.isExists = true;
      } else {
        this.isExists = false;
      }
    }

Angular: 搜索过滤器 rxjs

Angular: search filter rxjs

angular

rxjs