使用 filter() 过滤数组可以正常工作，但在前端不会改变

Question

组件.ts

searchVideo = (search: string) => {
        this.query = search;
        if(this.videos.length == 0){
          this.filteredData = [];
        }
        if(!this.query){
          this.filteredData = this.videos;
        }
        const args = this.query.toLowerCase();
        this.filteredData = this.videos.filter((data: any) => {
          return JSON.stringify(data).toLowerCase().includes(args);
        });
        console.log(this.filteredData);
      }

组件.html

<app-search-bar (sender)="searchVideo($event)"></app-search-bar>
...
<p>{{filteredData}}</p>

前端输出：

控制台输出：

过滤后，控制台中显示的数据绝对正确，但在前端打印时数据保持不变。

正如您在控制台中看到的，最初数组大小为 12，在输入字段中输入时，数组过滤器本身的大小为 7，这是正确的，但前端数组保持原样，即 12

Answer 1

我准备了一个代码示例，它显示了filter的用法，它的行为与预期的一样（类似于您使用它的方式）。

但我认为你的问题是你试图在你的模板中显示一组对象，这些对象的行为符合预期。 您应该改为显示对象的属性（或通常更改您可视化对象的方式）。

这是显示filter用法和您的问题以及可能的解决方案的代码示例： 代码演示