键入'字符串 | result[]' 不可分配给类型 'NgIterable<result> |空 |不明确的'

Question

我正在尝试在我的网络应用程序上显示从 Firebase 数据库检索到的文档（对象）。我正在使用的对象具有以下接口/类型

export interface seasonResultsObject {
  sport: string;
  country: string;
  league: string;
  season: string;
  results: result[];
}

我只想显示结果数组——它本身就是一个对象数组。我不想显示所有其他键值对。鉴于此，我构建了以下模板：

<div class="container">
  <app-workspace-nav></app-workspace-nav>
  <div *ngFor="let key of seasonDocument | keyvalue">
    <div *ngIf="key.key === 'results'">
      <!-- {{key.value}} -->                       
      <div *ngFor="let result of key.value">
        {{ result }}
      </div>
    </div>
  </div>
</div>

逻辑如下：遍历文档中的所有键值对，如果找到结果键，则（仅）显示该键值对的值-该行现在已被注释掉，但它可以完美运行并且在页面上显示对象列表，如下所示：

[object Object],[object Object],[object Object],[object Object],[object Object]

问题是这段代码：

      <div *ngFor="let result of key.value">
        {{ result }}
      </div>

逻辑上应该通过key.value 进行交互，这是result 类型的对象的数组/列表，但我收到以下错误：

error TS2322: Type 'string | result[]' is not assignable to type 'NgIterable<result> | null | undefined'.

6       <div *ngFor="let result of key.value">

作为参考，结果对象如下所示：

export interface result {
  [key: string]: any;
  Div: string;
  Date: number;
}

我很想知道我做错了什么以及如何解决它。提前谢谢你。

Answer 1

我解决了如下问题：

<div class="container">
  <app-workspace-nav></app-workspace-nav>
  <div *ngFor="let key of seasonDocument | keyvalue">
    <div *ngIf="key.key === 'results'">
      <div style="text-align: center;" *ngFor="let result of seasonDocument.results">
        <div style='display: flex'>
          <div style='padding-left: 1rem; padding-right: 1rem;'>{{ result.Date }}</div>
          <div style='padding-left: 1rem; padding-right: 1rem;'>{{result.HomeTeam}}</div>
          <div style='padding-left: 1rem; padding-right: 1rem;'>{{result.FTHG}}-{{result.FTAG}}</div>
          <div style='padding-left: 1rem; padding-right: 1rem;'>{{result.AwayTeam}}</div>
        </div>
       
        <br />
      </div>
    </div>
  </div>
</div>

但仍然不知道为什么我在原始问题上出现错误 - 从逻辑上讲它应该有效......也许有人仍然可以在这方面给我指导。