如何将LoDash GroupBY与不同的数组类型一起使用

时间：2019-09-17 14:34:18

标签： javascript angular lodash

我有一个Angular 8应用程序

我想用lodash的groupBy替换switch case语句。

我有这个：

 allCorrespondence: Array<DossierEntry>;
  correspondenceEntries: Array<DossierEntry>;
  attachmentEntries: Array<DossierEntry>;
  message = '';
  emptyMessageCorrespondentie = 'Geen correspondentie.';
  errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;
  showingSingle = false;

  single: DossierEntry;

这是开关盒：

handleCorrespondenceLoad(result) {

    if (result.length === 0) {
      this.message = this.emptyMessageCorrespondentie;
      return;
    }
    this.allCorrespondence = result;
    this.attachmentEntries = [];
    this.correspondenceEntries = [];


    for (let entry of result) {
      switch (entry.type) {
        case 'correspondence': {
          this.correspondenceEntries.push(entry);
          break;
        }
        case 'attachments': {
          this.attachmentEntries.push(entry);
          break;
        }
        default: {
          break;
        }
      }
    }
  }

但是怎么做？

谢谢

我这样尝试：

  _.mapValues(type, function(group, key) {
      return key === 'correspondence' ? _.groupBy(group, 'attachments') : group;

但随后我会收到此错误：

This condition will always return 'false' since the types 'number' and '"correspondence"' have no overlap.ts(2367)

所以谢谢。如果我这样做：

const groups = _.groupBy(result, 'type');
    console.log(groups.correspondence);
    console.log(groups.attachments);

然后我将看到结果：

Array(13)0: {dossierEntryId: 160, type: "correspondence", date: "2018-01-11T13:59:48.203125+01:00", name: "Hartrevalidatie intake", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}1: {dossierEntryId: 157, type: "correspondence", date: "2018-01-11T13:53:53.375+01:00", name: "Uitnodiging CV Courbet", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}2: {dossierEntryId: 154, type: "correspondence", date: "2018-01-10T10:51:40.09+01:00", name: "Eindbrief Dokkum", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}3: {dossierEntryId: 127, type: "correspondence", date: "2018-01-03T13:55:50.5335+01:00", name: "Oncologische revalidatie intake", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}4: {dossierEntryId: 124, type: "correspondence", date: "2018-01-03T13:06:37.221+01:00", name: "Oncologische revalidatie intake", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}5: {dossierEntryId: 107, type: "correspondence", date: "2017-12-11T14:18:29.920375+01:00", name: "Uitnodiging CV Courbet", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}6: {dossierEntryId: 106, type: "correspondence", date: "2017-12-11T13:54:42.795375+01:00", name: "Hartrevalidatie intake", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}7: {dossierEntryId: 105, type: "correspondence", date: "2017-12-11T13:52:53.732875+01:00", name: "Uitnodiging CV Courbet", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}8: {dossierEntryId: 104, type: "correspondence", date: "2017-12-11T13:52:53.232875+01:00", name: "Uitnodiging CV Courbet", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}9: {dossierEntryId: 103, type: "correspondence", date: "2017-12-11T12:24:19.27975+01:00", name: "Eindbrief Dokkum", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}10: {dossierEntryId: 102, type: "correspondence", date: "2017-12-11T12:24:17.59225+01:00", name: "Eindbrief Dokkum", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}11: {dossierEntryId: 38, type: "correspondence", date: "2017-12-10T14:11:51+01:00", name: "Oncologische revalidatie eindevaluatie", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}12: {dossierEntryId: 37, type: "correspondence", date: "2017-12-10T14:11:50+01:00", name: "Oncologische revalidatie eindevaluatie", summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…ss="cs7294CA65">&nbsp;</span></p></body>
↵</html>", …}length: 13__proto__: Array(0)
:4200/dossier-dossier-module-ngfactory.js:17352 Array(3)

这是html：


<app-vital10-page [noTopBar]="true">
  <h2 class="dossier-page-header">Correspondentie</h2>

  <p class="data-entry" *ngIf="!allCorrespondence">{{ message }}</p>

  <app-is-loading *ngIf="!correspondenceLoaded" message="Correspondentie wordt geladen"></app-is-loading>

  <div *ngIf="!showingSingle && correspondenceEntries && correspondenceEntries.length > 0">
    <div class="main-row main-row-dossier">
      <section class="data-entry">
        <h3 class="dossier-header">Algemeen</h3>
        <table class="dossier-table">
          <thead class="dossier-tableheader">
            <tr>
              <th class="dossier-tablehead fixed-one-fifth">Datum</th>
              <th class="dossier-tablehead fixed-four-fifths">Onderwerp</th>
            </tr>
          </thead>
          <tbody class="dossier-tablebody">
            <tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)">
              <td>{{ entry.date | date:"dd-MM-y" }}</td>
              <td>{{ entry.name }}</td>
            </tr>
          </tbody>
        </table>
      </section>
    </div>
  </div>

  <div *ngIf="!showingSingle && attachmentEntries && attachmentEntries.length > 0">
    <div class="main-row main-row-dossier">
      <section class="data-entry">
        <h3 class="dossier-header">Bijlage</h3>
        <table class="dossier-table">
          <thead class="dossier-tableheader">
          <tr>
            <th class="dossier-tablehead fixed-one-fifth">Datum</th>
            <th class="dossier-tablehead fixed-four-fifths">Onderwerp</th>
          </tr>
          </thead>
          <tbody class="dossier-tablebody">
          <tr class="dossier-correspondencerow" *ngFor="let entry of attachmentEntries; let i = index" (click)="gotoItem(i, entry.type)">
            <td>{{ entry.date | date:"dd-MM-y" }}</td>
            <td>{{ entry.name }}</td>
          </tr>
          </tbody>
        </table>
      </section>
    </div>
  </div>

  <app-dossier-correspondence-item
    [item]="single"
    (goBack)="goBack($event)"
    *ngIf="showingSingle">
  </app-dossier-correspondence-item>
</app-vital10-page>

但是如何现在在模板而不是console.log上显示它呢？谢谢

1 个答案:

答案 0 :(得分：1)

尝试：

const groups = groupBy(result, 'type')
console.log(groups.correspondence)
console.log(groups.attachments)

请参见https://lodash.com/docs/#groupBy

相关问题
最新问题