Angular/Firebase-如何在对象上使用* ngFor [英] Angular / Firebase - How to use *ngFor on object

问题描述

我正在使用什么

• 角度
• Firebase

我有什么

• 显示有关问题"的详细信息的组件

• A component that displays details on an 'Issue'

在此问题中，我还有一个名为图像"的节点

Inside the issue I have another node called 'images'

在图像节点内部，我将拥有其他属性，例如"image_title"

Inside the image node I'll have further properties, such as 'image_title'

我要实现的目标

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

• My Issue component can display all data related to an issue

但是，问题可能在图像节点下包含多个图像

However, an issue may have multiple images under the image node

我也想遍历图像节点并显示所有的'image_title'属性

I would like to also loop through the image node and display all 'image_title' properties

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

Error I receive the following error with the code below:

错误错误:找不到类型为对象"的其他支持对象"[对象对象]". NgFor仅支持绑定到数组等Iterable.

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

问题

• 这怎么可能?

问题列表解析器

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

Issue Component imagesToDisplay is:

'imagesToDisplay:FirebaseListObservable;'

'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中有一条注释，我试图在其中循环浏览图像.

There's a comment in the HTML where I'm trying to loop through the images.

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

推荐答案

问题是您需要将图像(是对象文字)转换为可迭代的图像，以便*ngFor识别它.您可以将所有图像添加到数组中，然后再将其传递到imagesToDisplay:

The problem is you need to turn your images (which is an object literal) into an iterable so *ngFor recognizes it. You can add all the images into an array before passing it to 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);
      });

这篇关于Angular/Firebase-如何在对象上使用* ngFor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！