无法使用 Angular Reactive Forms 过滤数据

Question

我大多是 Angular 的新手。我有一个包含帖子列表的页面。我想用搜索框过滤帖子列表，但输入字段没有过滤数据。我不能使用 ngModel，因为我使用的是反应式表单。我认为这与视图中的输入有关。我真的不知道该怎么办了。这是我的代码。

<div class="b-posts">
<form class="b-form" (ngSubmit)="onSubmit(this.postForm.value)" [formGroup]="postForm">
<div class=" b-form__group form-group">
  <span class="b-form__circle"></span>
  <input type="text" name="post" placeholder="Type" class="b-form__input form-control"
    formControlName="text">
</div>
   <div class="b-form__filter form-group">
     <input type="text" formControlName="search">
    </div>
 </form>
  <div *ngFor="let post of filteredPosts">
      {{post.text}}
 </div>
<div class="b-post" *ngFor="let post of posts">
  <div class="b-post__main">
    <div class="b-post__info">
    <span class="b-post__circle"></span>
    <div>
     <p class="b-post__p">{{post.name}}</p>
      <p class="b-post__time">{{post.time}}</p>
    </div>
  </div>
  <div class="b-post__dots"></div>
</div>
<div>
  <p class="b-post__text">{{post.text}}</p>
  </div>
  </div>
 </div>

  The component.ts

   @Component({
    selector: 'app-posts-list',
     templateUrl: './posts-list.component.html',
     styleUrls: [ './posts-list.component.scss' ]
     })
    export class PostsListComponent implements OnInit {
    posts: Post[];
    filteredPosts: Post[];
    private _search: string;

    get search(): string {
    return this._search;
    }

    set search(value: string) {
    this._search = value;
    this.filteredPosts = this.filter(value);
    
    }

   postForm = this.formBuilder.group({
    id: [],
    name: [ 'ImePrezime' ],
    time: [],
    text: [ '' ],
    search: []
});

constructor(
    private formBuilder: FormBuilder,
) {}

ngOnInit(): void {
    this.postListService.getPosts().subscribe((post) => {
        this.posts = post;
    });
    this.filteredPosts = this.posts;
}

filter(data: string) {
    return this.posts.filter((post) => post.text.toLowerCase().indexOf(data.toLowerCase()) !== -1);
}
}

Answer 1

您需要使用更改事件来触发搜索输入上的数据过滤器，如下所示：

<input type="text" formControlName="search" (change)="filterData()">


filterData () {
    this.filter(this.postForm.get('search').value);
}

filter(data: string) {
  if (!data) return;
  return this.posts.filter((post) => post.text && post.text.toLowerCase().indexOf(data.toLowerCase()) !== -1);
}

如果您想为每次按键触发过滤器，也可以使用 (keyup) 事件

Answer 2

我已经简化了你的代码，因为我看不到服务文件。

这是一个简化的工作演示。过滤“Enter”命令以避免不必要的表单提交。

Stackblitz

如果是你想要的，请告诉我，我会尽力解释。

目前，您不应该从 .ts 文件中从服务中获取任何数据 - 至少根据您在没有依赖注入的情况下提供的代码。