Angular / Firebase - 如何在对象上使用 *ngFor

Question

我正在使用什么

• 角度
• Firebase

我有什么

• 显示“问题”详细信息的组件

• 在问题中，我有另一个名为“images”的节点

• 在图像节点内部，我将拥有更多属性，例如“image_title”

我正在努力实现的目标

• 我的问题组件可以显示与问题相关的所有数据

• 但是，一个问题可能在图像节点下有多个图像

• 我还想循环遍历图像节点并显示所有 'image_title' 属性

错误 我收到以下代码错误：

错误错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

问题

• 这怎么可能？

问题列表解决程序

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
        return Observable.create(observer => {

            this.authService.user
                .first()
                .subscribe(user => {

                    const projectId = route.params['projectId'];
                    const issueId = route.params['issueId'];

                    this.database.object(`/issue/${projectId}/${issueId}`)
                        .first()
                        .subscribe(issue => {
                            observer.next(issue);
                            observer.complete();
                        });
                });
        });
    }

问题组件 imagesToDisplay 是：

'imagesToDisplay: FirebaseListObservable;'

    this.activatedRoute.data
      .subscribe((
        data: { issueData: any, issueImageData: any }) => {
        this.issueToDisplay = data.issueData;
        this.imagesToDisplay =  data.issueData.images;
        console.log(this.imagesToDisplay);
      });

发布组件 HTML

HTML 中有一条注释，我试图在其中循环浏览图像。

<ul class="vs__details__ul">

  <li class="vs__details__li" *ngIf="issueToDisplay.issue_title">
    <div class="vs__label"> Issue Title </div>
    <div class="vs__data"> {{ issueToDisplay.issue_title }} </div>
  </li>

  <li class="vs__details__li" *ngIf="issueToDisplay.issue_comments">
    <div class="vs__label"> Issue Comments </div>
    <div class="vs__data"> {{ issueToDisplay.issue_comments }} </div>
  </li>

  <li class="vs__details__li">
    <div class="vs__label"> Images </div>
    <!-- LOOP THROUGH IMAGES HERE -->
    <div class="issue__images" *ngFor="let image of imagesToDisplay">

    <div class="vs__data"> {{ image.image_title }}</div>
    </div>
  </li>

</ul>

来自 Firebase 的 JSON 结构

控制台 -（来自组件中的 console.log）

Answer 1

创建一个自定义管道keys 以获取keys 的Object 列表

// pipes.ts
import { Pipe, PipeTransform } from '@angular/core';


@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
    transform(value, args: string[]): any {
        if(value instanceof Object) return Object.keys(value);
        else return [];
    }
}

在app.module.ts 中包含新的自定义管道

// app.module.ts
import { KeysPipe } from './pipes.ts;

@NgModule({
 declarations: [ KeysPipe ]

并用它来迭代*ngFor中的Object

<div *ngFor="let img of images | keys">
   <p>{{x[img]['title']}}</p>
</div>

图像对象：

images = {
   'img1': {'title': 'Title1'},
   'img2': {'title': 'Title2'},
   'img3': {'title': 'Title3'},
   'img4': {'title': 'Title4'}
}

Answer 2

问题是您需要将图像（这是一个对象文字）转换为可迭代的，以便*ngFor 识别它。您可以将所有图像添加到一个数组中，然后再将其传递给imagesToDisplay：

const images = [];
for (const image of Object.keys(data.issueData.images)) {
 images.push(data.issueData.images[image]);
}
this.imagesToDisplay = images;

为你创建一个函数：

interface Image {
  image_title: string;
}
// ...

function getIterableImages(images: any): Image[] {
  const arrayImages = [];

  // returns empty array if input is not defined
  if (images == undefined) return arrayImages;

  // returns an array of first level elements inside of object
  for (const key of Object.keys(images)) {
    if (images[key] != undefined) {
      arrayImages.push(images[key]);
    }
  }
  return arrayImages;
}
// ...

this.activatedRoute.data
      .subscribe((
        data: { issueData: any, issueImageData: any }) => {
        this.issueToDisplay = data.issueData;
        this.imagesToDisplay = getIterableImages(data.issueData.images);
        console.log(this.imagesToDisplay);
      });