类型“string | result[]”不可分配给类型“ngiterable< result>| null | undefined”

s4n0splo  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(385)

我试图在我的web应用程序上显示从firebase db检索的文档(对象)。我正在使用的对象具有以下接口/类型

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

我很想知道我做错了什么,以及如何改正。先谢谢你。

rur96b6h

rur96b6h1#

我解决问题的方式如下:

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

但我仍然不知道为什么我在最初的问题上会有错误——从逻辑上讲,它应该是有效的。。。也许还有人可以给我一些指导。

相关问题