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>

示例链接here

如果您需要进一步的帮助，请与我们联系。

此致

Balaji Sekar

如何在Angular中访问对象数组内部的数组？

2 个答案: