Question

我正在尝试创建一个手风琴，将其分组以显示按级别分组的会话列表。

我创建了一个已通过控制台日志检查过的管道，并且正在使用键和值输出数据。但是，当我尝试在用户界面中显示该值时，我只会得到空白值，就像没有数据一样。

如何获取显示在手风琴内部的实际值？我尝试了几种不同的变体，例如{{session.SessionTitle}}和{{session.value.SessionTitle}}，但似乎都没有用。

HTML：

<div id="accordion">
  <div class="card" *ngFor="let session of sessions | groupSessionByLevel:'LevelName'">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          {{session.key}}
          <i class="fas fa-plus"></i>
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <button class="btn btn-lg btn-block">{{session.value.SessionOrder}}. {{session.value.SessionTitle}}</button>
      </div>
    </div>
  </div>
</div>

管道：

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

@Pipe({
  name: 'groupSessionByLevel'
})
export class GroupSessionByLevelPipe implements PipeTransform {

  transform(collection: any, property: string): any {
    // prevents the application from breaking if the array of objects doesn't exist yet
    if(!collection) {
        return null;
    }

    const groupedCollection = collection.reduce((previous, current)=> {
        if(!previous[current[property]]) {
            previous[current[property]] = [current];
        } else {
            previous[current[property]].push(current);
        }

        return previous;
    }, {});

    // this will return an array of objects, each object containing a group of objects
    return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
}

}

Answer 1

在GroupSessionByLevelPipe管道中返回的对象的值中，您有一个数组。如果您在身体中添加ngFor，则会看到所需的按钮。

<div class="card-body" *ngFor="let sessionValue of session.value">
  <button class="btn btn-lg btn-block">{{sessionValue.SessionOrder}}. {{sessionValue.SessionTitle}}</button>
</div>

您可以在我创建的StackBlitz DEMO中看到此内容

您可以在该项目中看到，我在返回的分组对象的值中得到了一个数组。

按角度分组的ngFor不显示值

1 个答案: