I have a component that should choose beetween two mat-autocomplete depending an input value.
Both mat-autocomplete works without the ngIf, but when include it they stop working, I see "[object Object]" and it crashes when clicking:
Error: Attempting to open an undefined instance of `mat-autocomplete`. Make sure that the id passed to the `matAutocomplete` is correct and that you're attempting to open it after the ngAfterContentInit hook.
<div *ngIf="grouped;then grouped else notGrouped">
</div>
<ng-template #grouped>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="inputDisplay" >
<mat-optgroup *ngFor="let group of groupedItems" [label]="group.searchString">
<mat-option *ngFor="let item of group.items" [value]="item">
{{ item.search }}
</mat-option>
</mat-optgroup>
</mat-autocomplete>
</ng-template>
<ng-template #notGrouped>
<mat-autocomplete *ngIf="!grouped" #auto2="matAutocomplete" [displayWith]="inputDisplay">
<mat-option *ngFor="let item of filteredItems" [value]="item">
{{ item.search }}
</mat-option>
</mat-autocomplete>
</ng-template>
Is it not possible to include mat-autocomplete in an ngIf?
This is working, Please try this
<mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption="true" [displayWith]="displayFn" (optionSelected)="autocompleteSelected($event)" >
<ng-container *ngIf="lookupType=='multi'">
<mat-optgroup class="lookup-matoptgroup" *ngFor="let group of lookupResult" [label]="group.group">
<mat-option class= "lookup-matoption" *ngFor="let item of group.content">
<span >
{{ item.name }}
</span>
</mat-option>
</mat-optgroup>
</ng-container>
<ng-container *ngIf="lookupType=='single'">
<mat-option *ngFor="let item of lookupResult" [value]="item">
<span>
{{ item.name }}
</span>
</mat-option>
</ng-container>
</mat-autocomplete>
Try it like this:
<div *ngIf="grouped; else notGrouped">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="inputDisplay" >
<mat-optgroup *ngFor="let group of groupedItems" [label]="group.searchString">
<mat-option *ngFor="let item of group.items" [value]="item">
{{ item.search }}
</mat-option>
</mat-optgroup>
</mat-autocomplete>
</div>
<ng-template #notGrouped>
<mat-autocomplete #auto2="matAutocomplete"
[displayWith]="inputDisplay">
<mat-option *ngFor="let item of filteredItems" [value]="item">
{{ item.search }}
</mat-option>
</mat-autocomplete>
</ng-template>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.