Javascript 我的角模板订阅后不刷新'

我正在使用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();
  }

}

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

如果我查看控制台中的devtool，我会发现，首先第二个控制台日志(log)显示的是第一个，然后是第二个，数据正确.

经过大量研究，我发现如果我这样做: this.data = this.dashboardService.getData()个 而不是订阅，然后在模板中放置异步 @if(data | async; as data)这行得通，但我想知道为什么订阅行不通.

让你知道我是新的Angular ，这是我的第一个网站.

如我所说，我试过使用第二种方法，但我想知道为什么第一种方法行不通