问题标签 [mat-autocomplete]

我有一个角度自动完成树组件，我对自动完成面板宽度有疑问。

我有两个要求可以单独解决，但不能一起解决：

• 一旦内容比面板宽，面板应该会增长。我用过[panelWidth] = "auto"这个，它工作得很好。
• 面板应具有主机输入的最小宽度。也可以为此使用 panelWidth ，但随后我失去了第一点的功能。

从更改垫子自动完成宽度？) 我看到我可以使用[panelWidth] = "auto".

我知道我可以使用 css 样式 .mat-autocomplete-panel{min-width: "300px"}，但不知道如何获取特定输入的宽度。

所以我求助于javascript。我在文档中看到 AutocompletePanel 公开了面板 ElementRef，但是无论我做什么，这个值似乎都是未定义的？获得这个价值的正确方法是@ViewChild？我有以下在opened事件上运行的代码。

堆栈闪电战

According to the MatAutocomplete documentation, there is a classList input to style the panel.

@Input('class') classList: string | string[]

Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling.

When I do <mat-autocomplete #auto="matAutocomplete" classList="test-class"> I expected that I would see the test-class added to the mat-autocomplete-panel? But this does not work.

Can someone please explain how this input is to be used?

Stackblitz

根据MatAutocomplete 文档，MatAutocomplete 类中有一个panel属性可以为您提供面板的 elementRef。

面板：ElementRef

包含自动完成选项的面板元素。

尽管 autocomplete.panel 始终未定义，但我正在努力使其正常工作？我错过了什么？

堆栈闪电战

请帮我：

如何在 mat-auto-complete 中添加默认选定值？

我在 Angular 项目中有自定义 Mat Auto Complete。它有 2 个后缀，清除和下拉按钮。当我点击清除按钮代码this.myControl.reset('', { emitEvent: true });重置输入值。但是下拉面板没有打开。我尝试使用以下格式，但没有奏效

1. this.myControl.reset();
2. this.myControl.reset('', { emitEvent: true });
3. this.myControl.patchValue('');

StackBlitz 演示

自动完成显示示例.ts

自动完成显示-example.html

我正在使用mat-autocomplete但不是预先填充下拉列表，我想等到用户键入 soemthing 然后调用后端服务来填充它。这是我试图解决的例子。我的想法是(keyup)在输入中添加一个，然后在我键入时调用我的函数：

mat-autocomplete 适用于模拟数据。当我将它与实际服务集成时，它不会填充下拉列表。

我的 html 看起来像这样

组件如下所示

上面的组件工作正常，并显示带有模拟数据的下拉列表，

现在，我试图从服务中获取响应并将其分配回 this.users 并且它不起作用。

以下是我尝试过的

我的服务如下所示

服务响应与我正在使用的模拟数据完全相同。

我错过了什么？任何输入表示赞赏。谢谢。

app.component.html

<input type="text" placeholder="data" aria-label="Number" matInput [formControl]="organisationControl" [matAutocomplete]="auto" > <mat-autocomplete #auto="matAutocomplete" [displayWith]=" displayFn" (optionSelected)='onOrgChange($event.option.value)'> <mat-option *ngFor="let option of filteredOptions| async | sort: 'name'" [value]="option"> {{option 。姓名}}

app.component.ts

app.module.ts

定制管道

共享 --> 管道 --> sort.pipe.ts

问题：它不是按升序显示的。有什么我想输入的吗？

我已经处理了我的代码，因为我正在尝试使用 formControl 进行自动完成，但是当您选择某些内容到我的 formgroup 数组时，我需要将这些数据带入。我想知道是否存在一种方法可以让 formControl 过滤我的自动完成和 formControlName 来获取数据，谢谢，这是我的代码：

private _filterA(name: string): IArticles[] { const filterValue = name.toLowerCase(); return this.ArticleList.filter(option => option.descripcion.toLowerCase().indexOf(filterValue) === 0); }

还有我的 HTML：

}

请不要将其标记为重复

我是角度材料设计的新手，但我对 mat-autocomplete 有疑问。我Mat-Autocomplete在 FromGroup 的 FormArray 中有多个。在keyup输入字段中，它从 API 调用中获取数据并填充自动完成。在 Keyup 上获取数据后，它将打开面板。

1. 当我按单词然后自动完成列表打开然后我希望这个列表无限滚动
2. 我在 formGroup 的 formArray 中有多个自动完成功能。

我不想在项目中使用第三方依赖项，例如 ngx-infinite-scroll。