如何在 Angular 6 中单击按钮时获取 Primeng 自动完成文本答案

【问题标题】：How to fetch ngPrime autocomplete text on button click in Angular 6如何在 Angular 6 中单击按钮时获取 Primeng 自动完成文本
【发布时间】：2020-01-04 18:00:47
【问题描述】：

我正在使用ngPrime 自动完成从服务中获取数据。我的要求是在按钮单击的任何情况下获取以自动完成方式编写的文本。我尝试在组件中使用 getElementById.value 获取值，但它返回 undefined。

  <p-autoComplete [(ngModel)]="contact" [suggestions]="contactList.TaxEntities" (completeMethod)="filterContact($event)"
        field="TaxEntityName" [size]="30" placeholder="Search Contact" [minLength]="1" appendTo="body" id="auto">
        <ng-template let-selectedItem pTemplate="item">
            <div class="ui-helper-clearfix">
                {{selectedItem.TaxEntityName}}, {{selectedItem.TaxEntityABN}}
            </div>
        </ng-template>
    </p-autoComplete>

【问题讨论】：

您能否创建或放置最少的代码，我想知道您为什么使用 getElementbyid 来获取所选项目？或者看看这个链接stackblitz.com/edit/primeng-autocomplete它会帮助你
实际上，我已经创建了一个可重用的组件，即 Autocomplete。我在另一个组件中使用这个组件。在另一个组件中，有一个按钮在任何情况下都需要自动完成文本值。因此，我尝试通过其 id 获取自动完成值。但是，它没有价值
这是另一个component.html文件中的代码 Resuable autocompletelte component
我不确定，您需要使用 reusableComponent 中的 [(ngModel)]="brand" 获取价值，并将该值传递给另一个组件过滤另一个组件中的数据并将过滤后的数据返回给您reusableComponent 这一切你可以通过使用 @input and @output 来实现，我不确定你在 reusablecomponent 和 anothercomponent 中的代码是什么。
您希望我为您创建一些示例，而不是您必须放置一些可重用组件的代码和另一个带有 html 和数组的组件，您将用于过滤数据谢谢

标签： javascript angular autocomplete

【解决方案1】：

根据您的评论：

这是另一个 component.html 文件中的代码 Resuable autocompletelte component Search Contact 这里，我想获取自动完成值。我该如何实现？

您需要使用input and output detectors 处理此问题。您可以使用输入装饰器将值从父组件传递给子组件。您可以使用输出（事件发射器）来获取父组件中的子组件值

【讨论】：