如何在Angular中从列表中打印搜索值

2022-01-28 07:58:28 标签 htmlangulartypescriptsearchfilter

我在我的主页上有一个搜索栏,过滤了我的收藏夹,我试图打印搜索结果号码,但我不确定如何打印它,因为我的收藏是一个列表,而不是数组。

我试过{{最喜欢的。然后我得到这个错误“属性'长度'不存在类型'列表'。”

如果我做{{favorites。count}}然后我没有错误,但我也没有看到任何东西,我认为它仍然没有打印搜索结果号码。

  <form class="search-form">
    <input
      #searchValue
      aria-label="Search" id="input-field" class="input-field" name="insightSearchFilter" [(ngModel)]="insightSearchFilter (ngModelChange)="filterChanged($event)"
      type="search" [formControl]="inputCtrl"
    />
    <p class="hint">We found {{favorites.length}}item when we search for "{{ inputCtrl?.value }}"</p>
  </form>
    <div *ngIf="favorites.length > 0">
      <app-card-list
        [cards]="favorites"
        (refreshCardList)="refresh($event)"
        [entity]="fav"
      ></app-card-list>
    </div>

  favorites: List<Favorite>;
  loading: boolean;
  getUserFavs$: Subject<void> = new Subject();
  searchInput: string;
  insightSearchFilter: string;
  user: User;
  ngOnInit(): void {
    this.getUserFavs$.pipe(switchMap(() => {
          return this.userService.getUser();
        }),
      )
      .subscribe((user: User) => {
        this.favorites = user.userFavorites;
        this.user = JSON.parse(JSON.stringify(user));;
      });
    this.getUserFavs$.next();
  }
  filterChanged(searchText?: string) {
    if (!searchText) {
      this.favorites = this.user.userFavorites;
    }
    searchText = searchText.toLowerCase();
    this.favorites = this.user.userFavorites.filter((item) => {
      return item.name.valueOf().toLowerCase().includes(searchText);
    });
  }
阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码