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

Question

I have an array of objects containing employees, that looks like this:

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

This array is the datasource for my grid. In the same grid's 'languages' column, I am trying to list these languages as chips elements. To create these elements I tried to use ngFor, as it follows (I am using 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>

This kinda works, however, because of the 2 ngFors, it displays the languages multiple times. What can I do about this? What would be a better way to solve this?

Answer 1

You can remove the one ngFor for all the employees as you already have access to the data in the template from the grid's data source and can access the employees languages like below

<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>

you can also have a look at the Syncfusion documentation on column templates: https://help.syncfusion.com/angular/grid/columns#column-template

Answer 2

Greetings from the Syncfusion support,

You can bind the chip list component in the Grid column using the column template feature of the Grid. In the below code example, we have used ngFor in an ng-template directive and it is a looping basis to bind text values in the chip list. Please refer to the below code example and sample for more information.

 [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>

Sample link here

Please get back to us, if you need further assistance.

Regards,

Balaji Sekar