angular - 为什么我的 ionic 程序没有显示列表？

Question

编辑：这已经解决了！检查 spells.service.ts 文件以进行修复

我正在构建一个龙与地下城助手应用程序，但在获取要显示在应用程序中的咒语列表时遇到了一些麻烦。

它是使用 Ionic 框架和 Angular 风格编写的。

这是应该显示所有拼写的 HTML 文件 (tab3.page.html) 的示例：

<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>

“spells”调用是一个 Observable 数组，在 tab3.page.ts 中定义：

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) {
    //nothing rn until I can make the spell-detail tab
  }

}

console.log 显示它正在正确读取 getAllSpells，它在 spells.service.ts 中定义：

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[]>();

    for (let i = 0; i < this.NUM_OF_SPELLS; i++) {
      this.spells[i] = (SPELLS.spellList[i]);
    }
  }

  getAllSpells(): Observable<Spell[]> {
    return this.spells;
  }
}

编辑：必须替换此文件中的一些代码，这是 spells.service.ts 的工作更新版本

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[]>();

    this.spells = of(SPELLS.spellList);
  }

  getAllSpells(): Observable<Spell[]> {
    return this.spells;
  }
}

最后，它正在读取的 SPELLS 来自文件 spellList.ts：

export const SPELLS = {
    spellList: [
        {
            "name": "Abi-Dalzim's Horrid Wilting",
            "damage": [
                "12d8"
            ],
            "damageType": "necrotic damage",
            "level": 8,
            "castTime": "1 action",
            "damageLevel": [
                8
            ],
            "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. Each creature in that area must make a Constitution saving throw. Constructs and undead aren’t affected, and plants and water elementals make this saving throw with disadvantage. A creature takes 12d8 necrotic damage on a failed save, or half as much damage on a successful one.<br>Nonmagical plants in the area that aren’t creatures, such as trees and shrubs, wither and die instantly.",
            "school": "necromancy",
            "ritual": false,
            "range": "150 feet",
            "attackRoll": "save",
            "concentration": false,
            "components": [
                "V",
                "S",
                "M (a bit of sponge)"
            ]
        },
        {
            "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)",
            "damageLevel": [
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9
            ],
            "damaging": true,
            "ritual": false,
            "name": "Absorb Elements",
            "range": "self",
            "description": "The spell captures some of the incoming energy, lessening its effect on you and storing it for your next melee attack. You have resistance to the triggering damage type until the start of your next turn. Also, the first time you hit with a melee attack on your next turn, the target takes an extra 1d6 damage of the triggering type, and the spell ends.<br>At Higher Levels: When you cast this spell using a spell slot of 2nd level or higher, the extra damage increases by 1d6 for each slot level above 1st.",
            "school": "abjuration",
            "attackRoll": "see spell"
        }
  ]
}

（这只是页面其余部分的一个小样本，其中接近 500 个）

我通过查看我上过的一个类似的例子来写这个，我之前能够让它工作。唯一的变化是我现在从本地文件而不是从在线数据库中读取 spellList。

会喜欢任何和所有的帮助！

标签： angulartypescriptionic-framework