没有指令 "exportAs" 设置为 "matAutocompleteOrigin"

Question

我正在使用 Angular Material 6.4.7，但在使用 Mat-Autocomplete 时遇到了一些问题。我在 MatDialog 中插入了自动完成功能，自动完成功能的下拉菜单被对话框隐藏了。我知道我可以将 z-index 设置为高值，但这不是真正的解决方法，所以我尝试使用指令 #origin="matAutocompleteOrigin" 和 [matAutocompleteConnectedTo]="origin"。作为标题，它给了我错误“没有指令“exportAs”设置为 matAutocompleteOrigin”。我的 package.json:

"@angular/animations": "^6.1.8",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.8",
"@angular/compiler": "^6.1.8",
"@angular/core": "^6.1.8",
"@angular/forms": "^6.1.8",
"@angular/http": "^6.1.8",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.8",
"@angular/platform-browser-dynamic": "^6.1.8"

我的html：

<div #origin="matAutocompleteOrigin">
    <form>
        <mat-form-field>
            <input matInput type="text" placeholder="Search icon..." [matAutocomplete]="auto" [formControl]="iconCtrl"
             [matAutocompleteConnectedTo]="origin">
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let li of filteredIcons | async" [value]="li" (onSelectionChange)="onSelectIcon($event)">
                    <i [ngClass]="['selected-icon-class', li]"><span class="icon-text"> {{li}} </span></i>
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </form>
</div>

有什么建议吗？

Answer 1

您遗漏了 DIV 中的 matAutocompleteOrigin 指令：

<div matAutocompleteOrigin #origin="matAutocompleteOrigin">

'exportAs matAutocompleteOrigin' 属于该指令，因此如果没有它，#origin="matAutocompleteOrigin" 将失败。

没有指令 "exportAs" 设置为 "matAutocompleteOrigin"

There is no directive "exportAs" set to "matAutocompleteOrigin"

angular6

angular-material-6