Question

我正在尝试替换我过去构建的自定义建议菜单，使用mat-autocomplete ...很遗憾，如果不点击附加的matInput，我就无法让它工作。这就是我现在所拥有的：

<div id="connection-editor" class="resizable"
     contenteditable="true">
</div>
<mat-form-field>
<input matInput type="text" placeholder="Add type..." aria-label="Number" [formControl]="atQuery" [matAutocomplete]="auto">
</mat-form-field>
<mat-autocomplete
    [style.position]="absolute"
    [style.left]="suggestX + 'px'"
    [style.top]="suggestY + 'px'" #auto="matAutocomplete">
  <mat-option *ngFor="let entry of entities" [value]="entry.name" (onSelectionChange)="onEntrySelect(entry)">
    {{ entry.name }}
  </mat-option>
</mat-autocomplete>

我正在根据atQuery上的互动更新contenteditable，并且正确填充了对象entities。

this.atQuery.valueChanges
        .debounceTime(400)
        .subscribe(query => {
            this.connectionService.queryEntries(query).subscribe(text => {
                const suggestions: SuggestionJson[] = <SuggestionJson[]> JSON.parse(text).content;
                if (suggestions.length === 1) {
                    const suggestion: SuggestionJson = suggestions[0];
                    this.users = suggestion.users.map((e) => e.complex);
                    this.entities = suggestion.entities.map((e) => e.complex);
                    this.primitives = suggestion.primitives.filter((e) => !e.value).map((e) => {
                        const pr: PrimitiveEntryJson  = new PrimitiveEntryJson();
                        pr.value = e.value;
                        pr.type = e.type;
                        return pr;
                    });
                }
            });
        });

我曾经有两个变量suggestX和suggestY，它们会将建议菜单放在文本光标下。

现在只有当我点击具有mat-autocomplete的输入时才会显示[formControl]结果。我想在它们出现时进行控制，以便它可以使用绝对定位。

任何方式在没有输入（或隐藏输入）和mat-autocomplete的绝对位置使用formControl只需将查询作为文本传递？

由于

材料设计Angular 5 mat-autocomplete绝对位置，无需使用formControl

0 个答案: