时间戳

首页 > 解决方案 > 如何访问 PrimeNG 自动完成的“字段”属性内的数组元素

angular - 如何访问 PrimeNG 自动完成的“字段”属性内的数组元素

问题描述

我有一个 JSON 对象列表，其中 1 个示例如下

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

我的目标是访问 PrimeNG 自动完成属性“字段”中的电子邮件地址（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"，但这里的目标是显示电子邮件。

如果您想访问实验，下面是代码的链接：

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

标签： angulartypescriptautocompleteprimeng

解决方案

更新

这是不可能的，因为primeng 不接受字段作为数组的一部分。您可以在自动完成组件和此处的用于解析字段的函数中检查代码

---

Primeng 没有捕捉到 contactMedium 中的数组：

contactMedium[0].characteristic.emailAddress

我想文档是指没有数组的对象。

AutoComplete 还可以使用定义标签显示为建议的字段属性来处理对象。

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

这是一个示例，您可以确认使用contactMedium 作为数组不起作用。

推荐阅读