如何访问 PrimeNG autoComplete 的 'field' 属性内的数组元素

Question

我有一个 JSON 对象的列表，示例 1 在下面

 [
  {
    id: 'cont-609',
    contactMedium: [
      {
        characteristic: {
          emailAddress: 'test@gmail.com'
        }
      }
    ]
  }]

我的目标是在 PrimeNG autoComplete 属性 'field' 中访问 emailAddress (contactMedium[0].characteristic.emailAddress) 以便我可以显示列表下拉列表中的电子邮件。

contactMedium

中总会有1个元素

下面是我的打字稿代码

import { Component, ViewChild } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { SelectItem } from 'primeng/api';
import { SelectItemGroup } from 'primeng/api';
import { FilterService } from 'primeng/api';
import { AutoComplete } from 'primeng/autocomplete';
import { CountryService } from './countryservice';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [CountryService, FilterService]
})
export class AppComponent {
  userDetails: any[];

  selectedUserDetails: any[];

  selectedValue: any;

  selectedUserDetail: any;

  constructor() {}

  ngOnInit() {
    this.userDetails = [
      {
        id: 'cont-609',
        contactMedium: [
          {
            characteristic: {
              emailAddress: 'test@gmail.com'
            }
          }
        ]
      },
      {
        id: 'cont-610',
        contactMedium: [
          {
            characteristic: {
              emailAddress: 'test@gmail.com'
            }
          }
        ]
      },
      {
        id: 'cont-611',
        contactMedium: [
          {
            characteristic: {
              emailAddress: 'test@gmail.com'
            }
          }
        ]
      },
      {
        id: 'cont-612',
        contactMedium: [
          {
            characteristic: {
              emailAddress: 'test@gmail.com'
            }
          }
        ]
      },
      {
        id: 'cont-614',
        contactMedium: [
          {
            characteristic: {
              emailAddress: 'test@gmail.com'
            }
          }
        ]
      }
    ];
  }

  filterUserDetails(event) {
    let filtered: any[] = [];

    for (let val of this.userDetails) {
      filtered.push(val);
    }
    this.selectedUserDetails = filtered;
  }

  getUserDetails(): Promise<any[]> {
    return Promise.resolve(this.userDetails);
  }

  chooseItem(event) {
    this.selectedUserDetail =
      event.contactMedium[0].characteristic.emailAddress;
  }
}

下面是我的HTML代码

        <h5>Dropdown Testing</h5>
    <p>selectedUserDetail : {{selectedUserDetail}}</p>
    <p>TestVal : {{testVal}}</p>
    <p-autoComplete [(ngModel)]="selectedUserDetail" [suggestions]="selectedUserDetails"
      (completeMethod)="filterUserDetails($event)" [dropdown]="true" field="contactMedium">
      <!--<ng-template let-userDetails pTemplate=" item">
        <div>{{userDetails.contactMedium[0].characteristic.emailAddress}}</div>
      </ng-template> -->
    </p-autoComplete>

这部分属性无效，field="contactMedium[0].characteristic.emailAddress" 但是如果我从 json 中放置“id”，它不是数组，它可以工作 field="id" ，但这里的目标是显示电子邮件。

下面是link代码，如果你想访问实验:

https://stackblitz.com/edit/primeng-autocomplete-demo-dyihrs?file=src%2Fapp%2Fapp.component.html

Answer 1

更新

这是不可能的，因为 primeng 不接受字段作为数组的一部分。您可以在 autocomplete component and here, in the function used to resolve field

中查看此处的代码

---

Primeng 没有捕获 contactMedium 中的数组：

contactMedium[0].characteristic.emailAddress

我想 documentation 指的是一个没有数组的对象。

AutoComplete can also work with objects using the field property that defines the label to display as a suggestion.

作为替代方法，您可以操作对象以删除数组。

这是一个example，您可以确认使用 contactMedium 作为数组是行不通的。

如何访问 PrimeNG autoComplete 的 'field' 属性内的数组元素

How to access array element inside 'field' attribute of PrimeNG autoComplete

angular

typescript

autocomplete

primeng