GroupedObservable：使用* ngFor和async管道

Question

我有一组对象，我通过类型属性进行分组。我正在使用RxJs GroupedObservable运算符与Angular * ngFor 指令和 async 管道来实现此目的。

出于某种原因，Angular能够呈现组键属性的文本，但它不会为分组集合中的项目呈现任何HTML。

对象界面：

export interface Accessorial {
  code: string;
  description: string;
  type: string;
  isSelected: boolean;
}

组件访问者：

this.groupedAccessorials = accessorialsObservable
      .mergeMap((collection) => {
        return collection;
      })
      .groupBy(item => item.type,
               item => item)
      .toArray();

模板：

<div *ngIf="groupedAccessorials | async">
     <div *ngFor="let group of groupedAccessorials| async">
        <h3>{{group.key}}</h3>
          <div *ngFor="let accessorial of group | async">
            <span>------------------------------------------</span><br/>
            {{accessorial.code}}<br/>
            {{accessorial.description}}<br/>
            {{accessorial.type}}<br/>
            <span>------------------------------------------</span><br/><br/>
          </div>
        </div>
     </div>

呈现HTML：

修改 ：

根据@ Dimitry-Grinko的要求

输出 {{_groupedAccessorials | json}}：

{
    "_isScalar" : false,
    "key" : "Origin",
    "groupSubject" : {
        "_isScalar" : false,
        "observers" : [],
        "closed" : false,
        "isStopped" : true,
        "hasError" : false,
        "thrownError" : null
    },
    "refCountSubscription" : {
        "closed" : true,
        "_parent" : null,
        "_parents" : null,
        "_subscriptions" : null,
        "syncErrorValue" : null,
        "syncErrorThrown" : false,
        "syncErrorThrowable" : false,
        "isStopped" : true,
        "destination" : {
            "closed" : true,
            "_parent" : null,
            "_parents" : null,
            "_subscriptions" : null,
            "syncErrorValue" : null,
            "syncErrorThrown" : false,
            "syncErrorThrowable" : false,
            "isStopped" : true,
            "destination" : {
                "closed" : true,
                "_parent" : null,
                "_parents" : null,
                "_subscriptions" : null,
                "syncErrorValue" : null,
                "syncErrorThrown" : false,
                "syncErrorThrowable" : false,
                "isStopped" : true,
                "destination" : {
                    "closed" : true
                },
                "_parentSubscriber" : null,
                "_context" : null
            }
        },
        "groups" : {
            "values" : {}
        },
        "attemptedToUnsubscribe" : true,
        "count" : 0
    }
}