.html：

Question

对于角度而言，我是新手，将ngFor与groupBy管道一起用于对对象进行分组并对其进行迭代仅显示分组对象，而不显示相关的子数据。

仅在下面我可以在标题上显示日期，但是相关的子数据不显示我做错了的地方，可以帮助我

.ts：

 this.events = [{
      id: 1,
      category:'camera',
      title: 'First event',
      date: '2017-12-26'
    }, {
      id: 2,
      category:'accessories',
      title: 'Second event',
      date: '2017-12-27'
    }, {
      id: 3,
      category:'camera',
      title: 'Third event',
      date: '2017-12-26'
    }, {
      id: 4,
      category:'accessories',
      title: 'Fouth event',
      date: '2017-12-27'
    },{
      id: 5,
      category:'camera',
      title: 'Fifth event',
      date: '2017-12-26'
    }]

.html：

<ion-content padding>
  <ion-item-group *ngFor="let group of events | groupBy:'date' ">
    <ion-item-divider color="light">
        {{ group.date }}
    </ion-item-divider>
    <ion-item>{{ group.title }}</ion-item>
</ion-item-group>
</ion-content>

PipeTransform：

@Pipe({ name: 'groupBy' })
export class GroupbycategoryProvider implements PipeTransform {

  transform(collection: Array<any>, property: string): Array<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(date => ({ date, events: groupedCollection[date] }));
  }
}

Answer 1

您需要像这样更改管道代码，然后才可以按日期过滤对象

func buildAcDB() *gorm.DB {
    connectionString  := os.Getenv("MS_SQL")

    acDB, err := gorm.Open("mssql", connectionString)

    if err != nil {
        panic("Failed to create connection pool. Error: " + err.Error())
    }
    gorm.DefaultCallback.Create().Remove("mssql:set_identity_insert")

    return acDB
}

HTML

func Start(db *gorm.DB, acDB *gorm.DB) {

Other stuff......

defer acDB.Close()

acDB.AutoMigrate(microlab.ACDepartements{})

}

Answer 2

GroupBy管道返回键/值对的对象。 https://github.com/danrevah/ngx-pipes#groupby

您需要先安装ngx-pipes，安装过程为： https://github.com/danrevah/ngx-pipes#installation

最适合您的数据结构的最后一段代码：

<div class="row" *ngFor="let event of events | groupBy: 'date' | pairs">
    <div>Group Date: {{event[0]}}</div>
    <div class="row" *ngFor="let g of event[1]">
        <div>Task: {{g.title}}</div>
    </div>
</div>

GroupBy与ngFor结合使用不起作用

.ts：

.html：

PipeTransform：

2 个答案: