Ionic+Angular龙与地下城辅助应用法术列表不显示问题排查及解决方案

最近在开发一款基于Ionic和Angular的龙与地下城（Dungeons and Dragons）辅助应用时，遇到了个头疼的问题：原本从在线数据库读取法术列表的功能完全正常，但改成读取本地静态文件后，页面上的法术列表死活渲染不出来。虽然控制台能正常打印出getAllSpells()返回的数据，但HTML模板里的*ngFor就是不生效。

问题代码回顾 #

先梳理下关键的代码片段：

展示列表的HTML模板（tab3.page.html）

这部分逻辑没问题，用async管道处理Observable类型的spells：

<ion-item-group>
  <ion-item-divider>
    <ion-label>
      <h2>Cantrips</h2>
    </ion-label>
  </ion-item-divider>
  <ng-container *ngFor="let spell of (spells | async)">
    <ion-item>
      <ion-label float:left>{{ spell.name }}</ion-label>
      <ion-text float:right>{{ spell.level }}</ion-text>
    </ion-item>
  </ng-container>
</ion-item-group>

组件文件（tab3.page.ts）

这里定义了Observable类型的spells，在ngOnInit里调用服务方法，控制台能拿到数据但页面不渲染：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Observable} from 'rxjs';
import { Spell } from '../interfaces/Spell.interface';
import { SpellsService } from '../services/spells.service';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  public spells: Observable<Spell[]>;
  constructor(private router: Router, public service: SpellsService) {}
  ngOnInit(): void {
    this.spells = this.service.getAllSpells();
    console.log(this.spells[15].name); // 这里能正常输出法术名称
  }
  viewSpell(spell) {
    // 后续实现详情页逻辑
  }
}

最初错误的服务文件（spells.service.ts）

问题根源就在这里！我错误地尝试直接给Observable对象的索引赋值，完全不符合Observable的使用规范：

import { Injectable, Optional } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Spell } from '../interfaces/Spell.interface';
import { SPELLS } from 'src/assets/data/spellList';

@Injectable({
  providedIn: 'root'
})
export class SpellsService {
  private spells: Observable<Spell[]>;
  public NUM_OF_SPELLS = 487;
  constructor() {
    this.spells = new Observable<Spell[]>();
    // ❌ 错误：不能直接给Observable对象的索引赋值
    for (let i = 0; i < this.NUM_OF_SPELLS; i++) {
      this.spells[i] = (SPELLS.spellList[i]);
    }
  }
  getAllSpells(): Observable<Spell[]> {
    return this.spells;
  }
}

修复方案 #

正确的做法是使用RxJS的of()操作符，把本地静态数组转换成合法的Observable对象。修改后的服务代码如下：

import { Injectable, Optional } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Spell } from '../interfaces/Spell.interface';
import { SPELLS } from 'src/assets/data/spellList';

@Injectable({
  providedIn: 'root'
})
export class SpellsService {
  private spells: Observable<Spell[]>;
  public NUM_OF_SPELLS = 487;
  constructor() {
    // ✅ 正确：用of()把本地数组包装成Observable
    this.spells = of(SPELLS.spellList);
  }
  getAllSpells(): Observable<Spell[]> {
    return this.spells;
  }
}

问题原因解释 #

Observable对象并不是普通数组，不能像操作数组那样直接通过索引赋值。of()操作符的作用是接收一个值（这里是整个法术列表数组），返回一个会发出这个值然后完成的Observable，这样Angular的async管道才能正确订阅并处理数据流，最终在页面上渲染出法术列表。

本地数据文件spellList.ts的结构是正常的，示例如下：

export const SPELLS = {
  spellList: [
    {
      "name": "Abi-Dalzim's Horrid Wilting",
      "damage": [ "12d8" ],
      "damageType": "necrotic damage",
      "level": 8,
      "castTime": "1 action",
      "duration": "instantaneous",
      "damaging": true,
      "description": "You draw the moisture from every creature in a 30-foot cube centered on a point you choose within range...",
      "school": "necromancy",
      "ritual": false,
      "range": "150 feet",
      "attackRoll": "save",
      "concentration": false,
      "components": [ "V", "S", "M (a bit of sponge)" ]
    },
    {
      "name": "Absorb Elements",
      "damageType": "varied damage",
      "concentration": false,
      "damage": [ "1d6", "2d6", "3d6", "4d6", "5d6", "6d6", "7d6", "8d6", "9d6" ],
      "level": 1,
      "components": [ "S" ],
      "duration": "1 round",
      "castTime": "1 reaction (when taking acid, cold, fire, lightning, or thunder damage)",
      "damaging": true,
      "ritual": false,
      "range": "self",
      "description": "The spell captures some of the incoming energy, lessening its effect on you and storing it for your next melee attack...",
      "school": "abjuration",
      "attackRoll": "see spell"
    }
  ]
}

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