如何訪問 Angular 中對象數組中的數組？

Question

我有一個包含員工的對象數組，如下所示：

[    
   {
      id: "1",
      name: "name",
      email: "email",
      languages: ['english', 'german', 'spanish']
    },
    {
      id: "2",
      name: "name",
      email: "email",
      languages: ['english', 'spanish']
    },
]

這個數組是我網格的數據源。 在同一個網格的“語言”列中，我試圖將這些語言列為芯片元素。 為了創建這些元素，我嘗試使用 ngFor，如下所示（我使用的是 syncfusion）：

<e-column field="languages" headerText="Languanges" type="array">
  <ng-template #template let-data>
    <div *ngFor="let employee of employeeList">
      <ejs-chiplist id="chip" *ngFor="let lang of employee.languages">
        <e-chips>
          <e-chip text="{{lang}}" cssClass="e-primary"></e-chip>
        </e-chips>
      </ejs-chiplist>
    </div>
  </ng-template>
</e-column>

然而，這有點工作，因為有 2 個 ngFors，它會多次顯示語言。 我能做些什么呢？ 有什么更好的方法來解決這個問題？

Answer 1

您可以為所有員工刪除一個 ngFor，因為您已經可以從網格的數據源訪問模板中的數據，並且可以訪問員工語言，如下所示

<e-column field="languages" headerText="Languanges" type="array">
  <ng-template #template let-data>

      <ejs-chiplist id="chip" *ngFor="let lang of data.languages">
        <e-chips>
          <e-chip text="{{lang}}" cssClass="e-primary"></e-chip>
        </e-chips>
      </ejs-chiplist>
  </ng-template>
</e-column>

您還可以查看有關列模板的 Syncfusion 文檔： https://help.syncfusion.com/angular/grid/columns#column-template

Answer 2

來自 Syncfusion 支持的問候，

您可以使用 Grid 的列模板功能在 Grid 列中綁定芯片列表組件。 在下面的代碼示例中，我們在 ng-template 指令中使用了 ngFor，它是在芯片列表中綁定文本值的循環基礎。 請參閱下面的代碼示例和示例以獲取更多信息。

 [app.component.html] <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings'> <e-columns> <e-column field='id' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column> <e-column field='name' headerText='Name' width='120' textAlign='Right'></e-column> <e-column field='email' headerText='Email' width='150'></e-column> <e-column headerText= 'Languages' width='120'> <ng-template #template ngFor let-column [ngForOf]="data"> <ejs-chiplist id="chip-default"> <e-chips> <ng-template ngFor let-lang [ngForOf]="column.languages"> <e-chip [text]="lang" cssClass="e-primary"></e-chip> </ng-template> </e-chips> </ejs-chiplist> </ng-template> </e-column> </e-columns> </ejs-grid>

示例鏈接在這里

如果您需要進一步的幫助，請回復我們。

問候，

巴拉吉·塞卡