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

Question

我有一个包含员工的对象数组，如下所示：

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

这个数组是我的网格的数据源。在同一网格的 'languages' 列中，我试图将这些语言列为 chips 元素。为了创建这些元素，我尝试使用 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 ngFor，它会多次显示语言。我该怎么办？解决这个问题的更好方法是什么？

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>

示例 link here

如果您需要进一步的帮助，请回复我们。

此致，

巴拉吉塞卡

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

How to access array inside of an array of objects in Angular?

html

javascript

syncfusion

angular