Ionic 5/Angular中如何将Observable返回数据赋值给全局变量

问题原因 #

你的代码存在3个核心错误导致无法正确拿到messageDetails的值：

• 路由参数的订阅是异步操作，你在订阅回调外调用接口请求时，currentId还没有完成赋值，且let currentId = Data[]本身属于语法错误
• 你误把subscribe方法返回的Subscription订阅对象赋值给了messageDetails，覆盖了初始值，直到接口响应回来才会重新赋值为接口返回的有效数据
• 接口请求本身是异步的，模板首次渲染时接口还没有返回结果，此时直接读取messageDetails的属性就会报未定义错误

修正方案 #

1. 修复 inbox-details.page.ts 逻辑 #

将接口请求逻辑移到路由参数的订阅回调内部，保证拿到正确的消息ID后再发请求，同时不要把订阅对象赋值给messageDetails：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ConfigService } from '../services/config.service';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-inbox-detail',
  templateUrl: './inbox-detail.page.html',
  styleUrls: ['./inbox-detail.page.scss'],
})
export class InboxDetailPage implements OnInit, OnDestroy {
  // 后续可以把any替换为service中定义的Messages接口类型
  messageDetails: any = null;
  // 存储路由订阅，用于组件销毁时取消订阅避免内存泄漏
  private routeSubscription: Subscription;

  constructor(private configService: ConfigService, private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.getMessageDetails();
  }

  getMessageDetails() {
    this.routeSubscription = this.activatedRoute.params.subscribe((parameter) => {
      const currentId = parameter['id'];
      // 仅在接口响应回调中给messageDetails赋值
      this.configService.getMessageDetail(currentId).subscribe((response) => {
        this.messageDetails = response;
        console.log('消息详情获取成功：', this.messageDetails);
      });
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    if (this.routeSubscription) {
      this.routeSubscription.unsubscribe();
    }
  }
}

2. 模板兼容异步渲染 #

为了避免数据返回前模板报错，建议用以下两种方式之一处理模板：

• 方案A：用*ngIf判断，数据返回前不渲染对应区域

<div *ngIf="messageDetails">
  <h2>{{ messageDetails.title }}</h2>
  <p>{{ messageDetails.body }}</p>
  <!-- 其他详情字段 -->
</div>

• 方案B：用可选链操作符读取属性

<h2>{{ messageDetails?.title }}</h2>
<p>{{ messageDetails?.body }}</p>

3. 可选优化 #

你在service中定义的Messages接口是空的，建议补充和后端接口返回字段匹配的属性，这样可以获得TypeScript的类型提示，避免字段拼写错误：

// config.service.ts 中修改Messages接口定义
export interface Messages {
  id: number;
  title: string;
  body: string;
  sender: string;
  receiver: string;
  created_at: string;
  // 其他后端返回的字段都可以补充在这里
}

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