Блог

Я пытаюсь отобразить документ (объект), извлеченный из базы данных 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;
}
 

Мне бы хотелось получить несколько идей о том, что я делаю неправильно и как я мог бы это исправить. Заранее спасибо.

Я решил эту проблему следующим образом:

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

Но до сих пор понятия не имею, почему у меня возникла ошибка в исходном вопросе — логически это должно было сработать… возможно, кто-то все еще может дать мне рекомендации по этому поводу.