Angular 14：筛选后视图未随服务响应更新的问题排查

我是Angular 14新手，正在开发简易待办应用。页面首次加载时列表显示正常，但切换筛选条件时，网络请求显示服务返回了正确数据，可列表视图没更新，仍显示全部条目。我试过用NgZone和ChangeDetectorRef修复，但没用。

列表组件代码 #

import { Component, Injectable, OnInit, NgZone, ChangeDetectorRef} from '@angular/core';
import { ServiceListService } from '../services/service-list.service';
import { faEdit, faTrash, faCheck } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.less']
})
@Injectable({
  providedIn: 'root',
})
export class ListComponent implements OnInit  {


  // icons
  faEdit = faEdit;
  faTrash = faTrash;
  faCheck = faCheck;

  list: any = [];
  isFilterApplied = false;
  categoryValue = '';
  statusValue = '';
  constructor(private service:ServiceListService, private cd: ChangeDetectorRef, private _ngzone: NgZone ) {}

  public ngOnInit() {
    this.FetchListFunction(this.categoryValue, this.statusValue, this.isFilterApplied);
  }

  FetchListFunction(categoryValue: string, statusValue: string, isFilterApplied: boolean){
    if (!isFilterApplied) {
      this.service.getList()
      .subscribe(response => {
        this._ngzone.run(() => { 
          this.list = response;
          this.cd.detectChanges();
          });
      });
    } else { 
      this.service.filterApplied(categoryValue, statusValue)
      .subscribe(response => {
        this._ngzone.run(() => { 
          this.list = response;
          this.cd.detectChanges();
        });
      });
    }
  }
}

列表服务代码 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class ServiceListService {
  isFilterEnabled = false;
  domain = 'http://localhost';
  url = this.domain + '/todocrud/api/fetchList.php';

 
  constructor(private httpClient: HttpClient) { }

  getList(){ // <= this run on first load when none filters applied
    return this.httpClient.get(this.url);
  }

  filterApplied(category: string, status: string){ // <= this run when any filter applied
    this.url = this.domain + `/todocrud/api/fetchList.php?status=${status}&category=${category}`;
    return this.httpClient.get(this.url);
  }
}

筛选组件代码 #

import { Component, OnInit } from '@angular/core';
import { ServiceCategoriesService } from '../services/service-categories.service';
import { ListComponent } from '../list/list.component';
import { faList as faList } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.less']
})
export class FiltersComponent implements OnInit {
  // icons
  faList = faList;


  categories:any;
  list:any;
  constructor(private serviceCategories:ServiceCategoriesService, private comp: ListComponent) {}

  ngOnInit() {
    this.serviceCategories.getCategories()
      .subscribe(response => {
        this.categories = response;
      });
  }

  statusValue = '';
  categoryValue = '';
  isFilterApplied: boolean = false;

  
  clickFilter(e: any){
    this.isFilterApplied = true;
    if (e.srcElement.parentElement.classList.contains('category')) {
      this.categoryValue = e.target.innerHTML;
    } else {
      var selectedStatus = e.target.innerHTML;
      if (selectedStatus === 'Completed') {
        this.statusValue = 'true';
      } else {
        this.statusValue = 'false';
      }
    }
    // console.log('Category:' + categoryValue) // selected category
    // console.log('Status:' + this.statusValue) // selected status
    this.comp.FetchListFunction(this.categoryValue, this.statusValue, this.isFilterApplied);
  }

}

列表组件HTML #

<div class="list-group">
    <div *ngFor="let item of list " class="item {{ item.status }}">
        <div class="content" >
            <h6 class="header">{{item.id }}. {{ item.title }}</h6>
        </div>
        <div class="actions">
            <span class="action-icon edit"><span class="icon"><fa-icon [icon]="faEdit"></fa-icon></span></span>
            <span class="action-icon delete"><span class="icon"><fa-icon [icon]="faTrash"></fa-icon></span></span>
            <span class="action-icon complete"><span class="icon"><fa-icon [icon]="faCheck"></fa-icon></span></span>
        </div>
    </div>
</div>

筛选组件HTML #

<div class="filters">
    <div class="FilterTitle">
        <span><span class="icon"><fa-icon [icon]="faList"></fa-icon></span>Filters: </span>
    </div>
    <div class="filter-holder">
        <mat-form-field class="filter status" appearance="fill">
            <mat-label>Status</mat-label>
            <mat-select name="status">
              <mat-option value="completed" class="status" (click)="clickFilter($event)">Completed</mat-option>
              <mat-option value="uncompleted" class="status" (click)="clickFilter($event)">Uncompleted</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field class="filter category" appearance="fill">
            <mat-label>Category</mat-label>
            <mat-select name="categories">
              <mat-option *ngFor="let item of categories" class="category" [value]="item" (click)="clickFilter($event)">{{item.name}}</mat-option>
            </mat-select>
        </mat-form-field>

        <div class="filter-item clear-filter">
            <button mat-raised-button>Clear</button>
        </div>
    </div>
</div>

JSON响应示例 #

[
    {
        "id": 4,
        "title": "Venenatis lectus magna",
        "description": "gravida arcu ac tortor dignissim convallis aenean et",
        "status": "in-progress",
        "completed": false,
        "category": "Movies to watch"
    },
    {
        "id": 15,
        "title": "test",
        "description": "test description",
        "status": "in-progress",
        "completed": false,
        "category": "Movies to watch"
    }
]

核心问题1：组件依赖注入错误 #

你在FiltersComponent的构造函数中直接注入ListComponent，这是错误的做法。Angular中组件不能通过构造函数注入另一个组件实例，除非是父子组件通过@ViewChild获取，否则你拿到的comp并不是页面上正在渲染的ListComponent实例，调用它的方法自然不会更新视图。

核心问题2：服务中url被永久修改 #

在ServiceListService的filterApplied方法中，你直接修改了类的url属性，导致后续调用getList()时，使用的是已经带参数的URL，而非初始的全量列表URL。

修复步骤： #

1. 修正服务逻辑，用可观察对象共享数据

修改ServiceListService，使用BehaviorSubject维护列表数据，让组件订阅数据变化：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServiceListService {
  private domain = 'http://localhost';
  private baseUrl = this.domain + '/todocrud/api/fetchList.php';
  private listSubject = new BehaviorSubject<any[]>([]);
  public list$ = this.listSubject.asObservable();

  constructor(private httpClient: HttpClient) { }

  loadFullList(): void {
    this.httpClient.get<any[]>(this.baseUrl).subscribe(data => {
      this.listSubject.next(data);
    });
  }

  applyFilters(category: string, status: string): void {
    let url = this.baseUrl;
    const params: string[] = [];
    if (status) params.push(`status=${status}`);
    if (category) params.push(`category=${category}`);
    if (params.length) {
      url += '?' + params.join('&');
    }
    this.httpClient.get<any[]>(url).subscribe(data => {
      this.listSubject.next(data);
    });
  }
}

2. 简化ListComponent，订阅服务数据

移除不必要的NgZone和ChangeDetectorRef，通过订阅服务的list$流自动更新视图：

import { Component, OnInit } from '@angular/core';
import { ServiceListService } from '../services/service-list.service';
import { faEdit, faTrash, faCheck } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.less']
})
export class ListComponent implements OnInit  {
  faEdit = faEdit;
  faTrash = faTrash;
  faCheck = faCheck;

  list: any[] = [];

  constructor(private service: ServiceListService) {}

  ngOnInit() {
    this.service.list$.subscribe(data => {
      this.list = data;
    });
    this.service.loadFullList();
  }
}

3. 修改FiltersComponent，调用服务筛选方法

移除直接注入ListComponent的代码，改为调用服务的筛选方法：

import { Component, OnInit } from '@angular/core';
import { ServiceCategoriesService } from '../services/service-categories.service';
import { ServiceListService } from '../services/service-list.service';
import { faList as faList } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.less']
})
export class FiltersComponent implements OnInit {
  faList = faList;

  categories: any[] = [];
  private currentStatus = '';
  private currentCategory = '';

  constructor(
    private serviceCategories: ServiceCategoriesService,
    private listService: ServiceListService
  ) {}

  ngOnInit() {
    this.serviceCategories.getCategories()
      .subscribe(response => {
        this.categories = response;
      });
  }

  onStatusChange(event: any): void {
    this.currentStatus = event.value === 'completed' ? 'true' : 'false';
    this.listService.applyFilters(this.currentCategory, this.currentStatus);
  }

  onCategoryChange(event: any): void {
    this.currentCategory = event.value.name;
    this.listService.applyFilters(this.currentCategory, this.currentStatus);
  }

  clearFilters(): void {
    this.currentStatus = '';
    this.currentCategory = '';
    this.listService.loadFullList();
  }
}

4. 更新筛选组件HTML，使用正确的事件绑定

用mat-select的(selectionChange)事件代替(click)，并绑定ngModel：

<div class="filters">
    <div class="FilterTitle">
        <span><span class="icon"><fa-icon [icon]="faList"></fa-icon></span>Filters: </span>
    </div>
    <div class="filter-holder">
        <mat-form-field class="filter status" appearance="fill">
            <mat-label>Status</mat-label>
            <mat-select name="status" [(ngModel)]="currentStatus" (selectionChange)="onStatusChange($event)">
              <mat-option value="completed">Completed</mat-option>
              <mat-option value="uncompleted">Uncompleted</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field class="filter category" appearance="fill">
            <mat-label>Category</mat-label>
            <mat-select name="categories" [(ngModel)]="currentCategory" (selectionChange)="onCategoryChange($event)">
              <mat-option *ngFor="let item of categories" [value]="item">{{item.name}}</mat-option>
            </mat-select>
        </mat-form-field>

        <div class="filter-item clear-filter">
            <button mat-raised-button (click)="clearFilters()">Clear</button>
        </div>
    </div>
</div>

额外优化点 #

• 给list属性创建TodoItem接口，避免使用any类型
• 在服务中添加HTTP请求错误处理
• 使用async管道简化订阅：在列表HTML中直接写*ngFor="let item of service.list$ | async"，可移除ListComponent中的list属性和手动订阅逻辑

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