没有将指令“ exportAs”设置为autoCompleteoOrigin

时间:2018-10-12 06:41:05

标签: angular6 angular-material-6

我正在使用Angular Material 6.4.7,但是Mat-Autocomplete遇到了一些麻烦。 我在MatDialog中插入了自动完成功能,对话框中隐藏了自动完成功能的下拉菜单。我知道我可以将z-index设置为较高的值,但这并不是真正的解决办法,因此我尝试使用指令#origin =“ matAutocompleteOrigin”和[matAutocompleteConnectedTo] =“ origin”。作为标题,它给了我错误“没有将指令“ exportAs”设置为autoCompleteoOrigin“。 我的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>

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

您在DIV上省略了matAutocompleteOrigin指令:

<div matAutocompleteOrigin #origin="matAutocompleteOrigin">

'exportAs matAutocompleteOrigin'属于该指令,因此#origin="matAutocompleteOrigin"失败。