我的角度模板订阅后不刷新

Question

我正在使用 Angular 17，我正在从 API 获取数据，但收到数据后，模板没有更新，也无法显示我的数据。

我向服务器发出请求的组件服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, tap } from 'rxjs';
import { APIBASEURL } from 'app/constants.config';


@Injectable({
  providedIn: 'root'
})
export class DashboardService {

  constructor(
    private http: HttpClient
  ) { }

  getData(): Observable<any> {
    return this.http.get(`${APIBASEURL}/dashboard/links`)
  }


}

我订阅之前方法的组件：

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FuseCardComponent } from '@fuse/components/card';
import { DashboardService } from './dashboard.service';
import { Subject, takeUntil } from 'rxjs';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
// import { CustomIconDirective } from './custom-icon.directive';
import {MatInputModule} from '@angular/material/input'; 
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatButtonModule} from '@angular/material/button';
import { UserService } from 'app/core/user/user.service';
import { User } from 'app/core/user/user.types';


@Component({
  selector: 'app-dashboard',
  standalone: true,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, FuseCardComponent, MatIconModule, MatInputModule, MatSlideToggleModule, MatButtonModule],
  templateUrl: './dashboard.component.html',
})


export class DashboardComponent implements OnInit, OnDestroy {

  data: any;

  private unsubscribeAll: Subject<any> = new Subject<any>();


  constructor(
    private dashboardService: DashboardService,
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer,
    private _userService: UserService,

  ) { }

  ngOnInit() {

    // Subscribe to the dashboard service
    this.dashboardService.getData().subscribe((data) => {
      this.data = data;
      console.log('subscribe: ', this.data);
    });

    console.log('after: ', this.data)
  }

  ngOnDestroy(): void {
    this.unsubscribeAll.next(null);
    this.unsubscribeAll.complete();
  }

}

之后在模板中我只显示我的数据，但它总是空的。

如果我查看控制台中的开发工具，我会看到首先显示第二个控制台日志，然后显示第二个控制台日志，数据正确。

经过大量研究，我发现如果我这样做：

this.data = this.dashboardService.getData()

而不是订阅，然后在模板中放置异步

@if(data | async; as data)

这有效，但我想知道为什么订阅它不起作用。

让您知道我是 Angular 新手，这是我的第一个网站。

我按照我说的尝试了第二种方法，但我想知道为什么第一种方法不起作用

Answer 1

由于

ChangeDetectionStrategy.OnPush

，您的视图不会自动更新。

为了在不使用模板中的

async

管道的情况下更新视图，您可以使用

ChangeDetectionRef

:

 constructor(
    ...
    private _cdr: ChangeDetectionRef
  ) { }

然后：

 this.dashboardService.getData().subscribe((data) => {
      this.data = data;
      this._cdr.detectChanges(); // <----
      console.log('subscribe: ', this.data);
    });

更多详情这里