如何以嵌套方式呈現記錄串列Angular異步管道

如何在 Angular 中以嵌套方式呈現單個記錄串列？我有一系列約會記錄。我想按天對約會進行分組。如果您自己在 Javascript 中使用嵌套回圈生成 HTML，這很簡單，但我不知道如何在 Angular *ngFor 中從單個串列中執行此操作（將 *ngFors 與多個串列嵌套很容易）。

這是問題的簡化版本。第一，資料模型。

export interface Appointment {
    scheduled: Date;
    client: string;
}
  appointments$: Observable<Appointment[]>;

這是我想如何呈現它，按天分組，然后是每天下面的客戶名稱串列。

最后這里是生成該圖片的 HTML。

 <ion-item-group>
    <ion-item-divider>
      <ion-label>MON 15</ion-label>
    </ion-item-divider>
  
    <ion-item>
      <ion-label>Alfred Futter</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Around the Trumpet</ion-label>
    </ion-item>
  </ion-item-group>
  
  <ion-item-group>
    <ion-item-divider>
      <ion-label>TUE 16</ion-label>
    </ion-item-divider>
    <ion-item>
      <ion-label>Antonio Taco</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Berglunds</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Blondel and Sons</ion-label>
    </ion-item>
  </ion-item-group>

所以現在的問題是我有一組約會，通常在 Angular 中像這樣迭代：

<ion-item-group *ngFor="let appt of appointments$ | async">
...
<ion-item-group>

But this just generates the outer list of ion-item-group. How do I also generate the inner subgroup of ion-items under each day using the appts.scheduled field to group?

Thank you.

Edit: my own solution per request of @E.Maggini below. First I munged the service itself to group the appointments by day, like this:

    appointments = Object.values(_.groupBy(appointments, a => a.scheduled.getDate()));

(yes I know just getDate() is not enough, this is just for proof of concept)

Then the following HTML suffices to render it exactly as desired:

  <ion-list>
    <ion-item-group *ngFor="let apptsOneDay of appointments$ | async">
      <ion-item-divider>
        <ion-label>{{apptsOneDay[0].scheduled}}</ion-label>
      </ion-item-divider>
      <ion-item *ngFor="let appt of apptsOneDay">
        <ion-label>{{appt.name}}</ion-label>
      </ion-item>
    </ion-item-group>    
  </ion-list>  

I would much prefer to operate on the Observable<Appointments[]> returned by the service using RXJS operators per the suggestion @GaurangDhorda but I can't get the operator chain to work.

uj5u.com熱心網友回復：

在此Stackblitz 鏈接中完成作業演示

基本上，您只需使用 groupBy、mergeMap 和 toArray rxjs 運算子來管理您的約會，從而獲得 groupBy 日期資料，并且您可以將此資料使用到模板中并使用嵌套的 ngFor 遍歷。這是您的可觀察管道代碼..

appointment$: Observable<appointmentObservable[]> = of(
this.appointmentData).pipe(
   mergeMap((parentData) => parentData),
   groupBy((parentGroup) => parentGroup.scheduled.toLocaleDateString()),
   mergeMap((group) => this.reducePipe(group)),
   toArray()
);

reducePipe(group: GroupedObservable<string, appointment>) {
  return group.pipe(
    reduce(
      (acc, cur) => {
        acc.clients.push(cur);
          return acc;
        },
        { scheduled: new Date(group.key), clients: [] }
      )
     );
 }

在上面的代碼中，這一行parentGroup.scheduled.toLocaleDateString()groupBy 運算子正在獲取計劃日期型別資料，我們將其轉換為 localString 并將其傳遞給下一個 mergeMap 管道。然后我們使用reduce 運算子，并再次使用scheduled: new Date(group.key)此行將stringDate 轉換為dateFormat 日期。

現在 HTML 是...

<ng-container *ngIf="appointment$ | async as appointments">
   <ion-item-group *ngFor="let appointment of appointments">
      <ion-item-divider>
         <ion-label>{{ appointment.scheduled | date: 'EEE dd' }}</ion-label>
      </ion-item-divider>
      <ion-item *ngFor="let userNames of appointment.clients">
         <ion-label>{{ userNames.client }}</ion-label>
      </ion-item>
   </ion-item-group>
</ng-container>

在上面的 html 中，我們使用appointment.scheduled | date: 'EEE dd'angular 格式的日期管道將日期轉換為您的需要，例如MON 21. 謝謝你。

標籤：angular ionic-framework

上一篇：在組件Ionic中重新加載資料

下一篇：items.map：引數“item”隱式具有“any”型別