Как получить доступ к массиву внутри массива объектов в Angular? - PullRequest
Новая
       48

Как получить доступ к массиву внутри массива объектов в Angular?

0 голосов
/ 22 апреля 2020

У меня есть массив объектов, содержащих сотрудников, который выглядит следующим образом: 

[    
   {
      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, он отображает языки несколько раз. Что я могу сделать по этому поводу? Как лучше решить эту проблему?

Ответы [ 2 ]

1 голос
/ 22 апреля 2020

Вы можете удалить один 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 - шаблон

0 голосов
/ 24 апреля 2020

Привет из поддержки Syncfusion,

Вы можете связать компонент списка микросхем в столбце Grid, используя функцию шаблона столбца Grid. В приведенном ниже примере кода мы использовали ngFor в директиве ng-template, и это циклическая основа для привязки текстовых значений в списке микросхем. Пожалуйста, обратитесь к приведенному ниже примеру кода и образцу для получения дополнительной информации. 

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

Пример ссылки здесь

Пожалуйста, свяжитесь с нами, если вам нужна дополнительная помощь.

С уважением,

Баладжи Секар

...