Angular 当可观察到的更改时，异步管道不更新视图

The problem here is that your component is extending the GlobalDataService, thus creating a local copy of it. In this way its dataArray$ value will be different wrom the one in the service, because they are two different objects.
If you want to share information across components, you should use your service as a Singleton.

简而言之，您只需更新和读取所有组件中的GlobalDataService中的dataArray$，并在所有感兴趣的组件中注入相同的GlobalDataService实例.

100

export class GlobalDataService {
    public dataArray$: BehaviorSubject<Data[]> = new BehaviorSubject(someData);

    public filterData(option: string): void {
        const filteredData = doStuffWithOptions(options);
        this.dataArray$.next(filteredData);
    }}

100

export class FilterComponent {
    triggerFilter(option: string): void {
        // You modify the BehaviourSubject in the service
        this.publicDataService.filterData(option)
    }
}

100

export class DataItemsComponent  {
    // Here you are doing a shallow copy of the BehaviourSubject
    public dataArray$ = this.publicDataService.dataArray$
}

<ng-container *ngIf="dataArray$ | async as dataArray">
     <span *ngFor="let data of dataArray" [ngStyle]="{ 'background-image': 'url(' + data.background + ')' }">
         <app-data-details [data]="data"></app-data-details>
     </span>
</ng-container>