Angular Groupby Observable<；对象[]>；角度7

我试图根据从可观察对象返回的值对数组元素进行分组，并在视图中将这些组显示为不同的

我有一个内存中的WebAPI模块，它包含下面的一类简化示例

我还在学习，请原谅我的无知

例： 内存中的-data.service.ts

export class InMemoryDataService implements InMemoryDbService {
createDb(){
const apps = [
{id: '1', app: 'app1', env_id:2, env:'DEV'},
{id: '2', app: 'app2' env_id:2, env:'DEV'},
{id: '4', app: 'app3' env_id:2, env:'DEV'},
{id: '5', app: 'app1' env_id:3, env:'Test'},
{id: '6', app: 'app2' env_id:3, env:'Test'},
{id: '7', app: 'app3' env_id:1, env:'PROD'},
];
return {apps}
}

应该为每个不同的应用程序值创建一个新的

，而不是为每个应用程序值创建一个新的

，这正是它现在所做的

这是我的密码

applications.service.ts 编辑：

home.component.html

<h1>My Access</h1>
<app-app-search></app-app-search>

<div fxLayout="row wrap">
  <div *ngFor="let app of apps" fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">

    <a routerLink="/detail/{{app.id}}">
      <mat-card class="card-widget mat-teal">
        <div mat-card-widget>
          <div mat-card-float-icon>
            <mat-icon>error</mat-icon>
          </div>
          <div class="pl-0">
            <h2 mat-card-widget-title>{{app.app}}</h2>
          </div>
        </div>
      </mat-card>
    </a>

  </div>
</div> 

我的访问权限
错误
{{app.app}}

---

我如何才能使每个应用程序名称都放入自己的组中？

这里有一种分组方法：

export class AppComponent implements OnInit {
  apps$: Observable<any>;
  createDb() {
    const apps = [
      { id: '1', app: 'app1', env_id: 2, env: 'DEV' },
      { id: '2', app: 'app2', env_id: 2, env: 'DEV' },
      { id: '4', app: 'app3', env_id: 2, env: 'DEV' },
      { id: '5', app: 'app1', env_id: 3, env: 'Test' },
      { id: '6', app: 'app2', env_id: 3, env: 'Test' },
      { id: '7', app: 'app3', env_id: 1, env: 'PROD' },
    ];
    return from(apps)
  }

  ngOnInit() {
    this.apps$  = this.createDb().pipe(
      // Tell rx which property to group by
      groupBy(application => application.app),
      mergeMap(obs => {
        // groupBy returns a GroupedObservable, so we need to expand that out
        return obs.pipe(
          toArray(), 
          map(apps => {
            return {id: obs.key, group: apps}
          })
        )
      }),
      toArray(),
    )
  }
}

---

这里有一种分组方法：

export class AppComponent implements OnInit {
  apps$: Observable<any>;
  createDb() {
    const apps = [
      { id: '1', app: 'app1', env_id: 2, env: 'DEV' },
      { id: '2', app: 'app2', env_id: 2, env: 'DEV' },
      { id: '4', app: 'app3', env_id: 2, env: 'DEV' },
      { id: '5', app: 'app1', env_id: 3, env: 'Test' },
      { id: '6', app: 'app2', env_id: 3, env: 'Test' },
      { id: '7', app: 'app3', env_id: 1, env: 'PROD' },
    ];
    return from(apps)
  }

  ngOnInit() {
    this.apps$  = this.createDb().pipe(
      // Tell rx which property to group by
      groupBy(application => application.app),
      mergeMap(obs => {
        // groupBy returns a GroupedObservable, so we need to expand that out
        return obs.pipe(
          toArray(), 
          map(apps => {
            return {id: obs.key, group: apps}
          })
        )
      }),
      toArray(),
    )
  }
}

使用lodash

npm install lodash

import * as groupBy from "lodash/groupBy";

…

getApps(): void{
    this.appService.getApps()
    .subscribe(apps => {
       var grouppedApps = groupBy(apps,"app");
       // You can do whatever you want now
     } );
  }

用lodash来做这个

npm install lodash

import * as groupBy from "lodash/groupBy";

…

getApps(): void{
    this.appService.getApps()
    .subscribe(apps => {
       var grouppedApps = groupBy(apps,"app");
       // You can do whatever you want now
     } );
  }

from（）。
toArray（）
运算符，因此对于没有固定的要发出的值集的用例，不能使用
toArray（）
。但是，您可以将
map
与中的
\uu.groupBy（）
一起使用。以下是我为这个特殊案例所做的：

  this.filteredMeetingList$ = this.sorting$.pipe(
  switchMap(sorting => this.meetingList$.pipe(
    // ...
    map(sMeetings => sMeetings.map(m => ({
      ...m,
      day: moment(m.startDateTime).format('DD. MMM'),
    }))),
  )),
  map(elem => _.groupBy(elem, 'day')),
 );

from（）。
toArray（）
运算符，因此对于没有固定的要发出的值集的用例，不能使用
toArray（）
。但是，您可以将
map
与中的
\uu.groupBy（）
一起使用。以下是我为这个特殊案例所做的：

  this.filteredMeetingList$ = this.sorting$.pipe(
  switchMap(sorting => this.meetingList$.pipe(
    // ...
    map(sMeetings => sMeetings.map(m => ({
      ...m,
      day: moment(m.startDateTime).format('DD. MMM'),
    }))),
  )),
  map(elem => _.groupBy(elem, 'day')),
 );

如果它是它自己的组件，这不是唯一有效的吗？它目前被用来提供一个假后端，因为目前还没有从服务器获取数据。我有另一个服务，它返回可观察的应用程序。这就是我想将应用程序分组的地方。我将试着从你的管道（）中退出，看看这个例子如何，是的，但我不会重新创建内存中的服务，安装材料等来显示rxjs逻辑：）好的，明白了，退出rxjs逻辑我添加了groupBy和mergeMap函数，就像下面的例子一样，但我得到了这个错误，请参见上面的编辑。我添加了一条注释，其中包含我看到的错误消息
getApps
函数被键入为
Observable
，但现在返回的是
Observable
类型。可能我遗漏了什么。getApps（）：可观察{仍以红色下划线：（这不是只有在它是自己的组件时才起作用吗？它目前用于提供一个假后端，因为现在没有从服务器获取数据。我有另一个服务返回可观察到的应用程序。这就是我希望按组分解应用程序的地方。我将尝试从你的管道中退出（）看看这个例子是怎么回事，是的，但我不打算重新创建内存服务、安装资料等来展示rxjs逻辑：）好的，明白了，离开你的rxjs逻辑，我添加了groupBy和mergeMap函数，就像下面的例子一样，但是我得到了这个错误，请参见上面的编辑。我添加了一条注释，其中包含错误消息，我看到
getApps
函数被键入
Observable
，但现在返回的是
Observable
类型。我可能错过了Ining something.getApps（）：可观察{仍以红色下划线：（谢谢让我给它一个快照好的。这很完美。我这样做了，能够控制台记录输出，并按预期按应用程序进行分割。那么现在我如何使用上面的html模板在视图中显示它呢？我试着弄乱了一些值，但主页返回时没有应用程序。谢谢让我给它一个快照好的我很好。我这样做了，并且能够通过控制台记录输出，并按预期将其按应用程序分割。那么现在我如何使用上面的html模板在视图中显示这些内容呢？我尝试处理一些值，但主页返回空，没有应用程序。