Angular中filterTaskList更新模型后视图未刷新，deleteTask功能正常

问题现象 #

组件中调用deleteTask方法时，视图能正常刷新；但调用filterTaskList方法时，接口返回了正确的过滤后数据，页面UI却没有更新。

组件代码实现 #

export class TasKListComponent implements OnInit{
   constructor(private service:ToDoService){}

  ngOnInit(): void {
      console.log(' ngOnInit called TaskList');
      this.getTaskList();
  }

  taskList:toDoTaskModel[]=[]
  getTaskList(){
    this.service.getAllTask().subscribe({
      next : res=>{
        console.log('getTaskList called ');
        this.taskList=res;       
      }
    });
  }

  deleteTask(id:number){
    this.service.deleteTask(id).subscribe({
      next : res=> {
        console.log(' deleted '+res)
        this.getTaskList()
      }
    });
  }

  filterTaskList(title:string):void{
    console.log(' filterTaskList '+title);
    this.service.searchTask(title).subscribe({
      next : res=>{
        console.log(('serach len '+res.length));
        this.taskList=res;
      }
    })
  }
}

接口响应示例 #

删除成功后响应 #

[{"id":255,"createdDate":"2023-09-18T19:02:39.131+00:00","lastUpdatedDate":"2023-09-18T19:02:39.131+00:00","desciption":"Test","title":"do the testing of angular app","colourCode":null},{"id":102,"createdDate":"2023-09-18T06:56:46.592+00:00","lastUpdatedDate":"2023-09-18T06:56:46.592+00:00","desciption":"Tablet","title":"Samsung S8 Tab","colourCode":null},{"id":54,"createdDate":"2023-09-14T05:25:54.987+00:00","lastUpdatedDate":"2023-09-14T05:25:54.987+00:00","desciption":"First Task","title":"Complete the spring boot course","colourCode":null},{"id":55,"createdDate":"2023-09-14T05:27:09.590+00:00","lastUpdatedDate":"2023-09-14T05:27:09.590+00:00","desciption":"This is second Taks","title":"complete spring","colourCode":null},{"id":152,"createdDate":"2023-09-18T15:09:39.234+00:00","lastUpdatedDate":"2023-09-18T15:09:39.234+00:00","desciption":"App","title":"Fix bugs","colourCode":null},{"id":257,"createdDate":"2023-09-18T19:11:53.242+00:00","lastUpdatedDate":"2023-09-18T19:11:53.242+00:00","desciption":"Java","title":"Stream,Collections","colourCode":null},{"id":203,"createdDate":"2023-09-18T16:18:48.263+00:00","lastUpdatedDate":"2023-09-18T16:18:48.263+00:00","desciption":"Iphone","title":"check specification","colourCode":null},{"id":256,"createdDate":"2023-09-18T19:05:19.247+00:00","lastUpdatedDate":"2023-09-18T19:05:19.247+00:00","desciption":"Spring Boot","title":"study actuator","colourCode":null},{"id":258,"createdDate":"2023-09-18T19:34:16.347+00:00","lastUpdatedDate":"2023-09-18T19:34:16.347+00:00","desciption":"Buy Pen","title":"need to buy pen","colourCode":null}]

过滤成功后响应 #

[{"id":255,"createdDate":"2023-09-18T19:02:39.131+00:00","lastUpdatedDate":"2023-09-18T19:02:39.131+00:00","desciption":"Test","title":"do the testing of angular app","colourCode":null},{"id":152,"createdDate":"2023-09-18T15:09:39.234+00:00","lastUpdatedDate":"2023-09-18T15:09:39.234+00:00","desciption":"App","title":"Fix bugs","colourCode":null},{"id":203,"createdDate":"2023-09-18T16:18:48.263+00:00","lastUpdatedDate":"2023-09-18T16:18:48.263+00:00","desciption":"Iphone","title":"check specification","colourCode":null}]

视图模板代码 #

<div class="d-flex flex-column flex-sm-row flex-wrap justify-content-start gap-2" >
    <div class="card" *ngFor="let task of taskList" style="width: 15rem;">
        <div class="card-header">
            Created on : {{task.createdDate | date}}
          </div>
          <div class="card-body">
            <h5 class="card-title">{{task.title}}</h5>
            <p class="card-text">{{task.desciption}}</p>
            <div class="d-flex justify-content-between">
              <a class="btn btn-warning"  (click)="deleteTask(task.id)">Delete </a>
              <a class="btn btn-primary">Update</a>
            </div>
          </div>
    </div>
</div>

排查与解决方案 #

可能原因 #

虽然代码逻辑看似正常，但Angular的变更检测可能没有在filterTaskList的订阅回调中触发。deleteTask方法通过重新调用getTaskList获取全量数据，而filterTaskList是直接赋值新数组，两种场景下变更检测的触发时机可能存在差异；也有可能是数据类型不匹配或非Angular上下文的异步操作导致变更检测未执行。

解决方案1：手动触发变更检测 #

注入ChangeDetectorRef，在赋值taskList后手动调用变更检测方法：

import { ChangeDetectorRef } from '@angular/core';

export class TasKListComponent implements OnInit{
   constructor(private service:ToDoService, private cdr: ChangeDetectorRef){}

  // ...其他代码保持不变

  filterTaskList(title:string):void{
    console.log(' filterTaskList '+title);
    this.service.searchTask(title).subscribe({
      next : res=>{
        console.log(('serach len '+res.length));
        this.taskList=res;
        this.cdr.detectChanges(); // 手动触发变更检测
      }
    })
  }
}

解决方案2：使用Async管道（推荐） #

将taskList改为Observable类型，配合async管道使用，让Angular自动管理订阅和变更检测，这是Angular的最佳实践：

export class TasKListComponent implements OnInit{
   constructor(private service:ToDoService){}

  taskList$: Observable<toDoTaskModel[]>;

  ngOnInit(): void {
      console.log(' ngOnInit called TaskList');
      this.taskList$ = this.service.getAllTask();
  }

  deleteTask(id:number){
    this.service.deleteTask(id).subscribe({
      next : res=> {
        console.log(' deleted '+res)
        this.taskList$ = this.service.getAllTask();
      }
    });
  }

  filterTaskList(title:string):void{
    console.log(' filterTaskList '+title);
    this.taskList$ = this.service.searchTask(title);
  }
}

修改视图模板，添加async管道：

<div class="d-flex flex-column flex-sm-row flex-wrap justify-content-start gap-2" >
    <div class="card" *ngFor="let task of taskList$ | async" style="width: 15rem;">
        <div class="card-header">
            Created on : {{task.createdDate | date}}
          </div>
          <div class="card-body">
            <h5 class="card-title">{{task.title}}</h5>
            <p class="card-text">{{task.desciption}}</p>
            <div class="d-flex justify-content-between">
              <a class="btn btn-warning"  (click)="deleteTask(task.id)">Delete </a>
              <a class="btn btn-primary">Update</a>
            </div>
          </div>
    </div>
</div>

额外检查点 #

1. 确认ToDoService的searchTask方法返回的Observable类型正确，且接口返回的数据结构与toDoTaskModel完全匹配；
2. 检查浏览器控制台是否有类型不匹配的警告或其他错误信息，排除数据格式问题。

内容的提问来源于stack exchange，提问作者Shubhankar Kumar