[英]mat-autocomplete inside an ng-template
I have a component that should choose beetween two mat-autocomplete depending an input value.我有一个组件应该根据输入值在两个 mat-autocomplete 之间进行选择。
Both mat-autocomplete works without the ngIf, but when include it they stop working, I see "[object Object]" and it crashes when clicking:两个 mat-autocomplete 都可以在没有 ngIf 的情况下工作,但是当包含它时,它们停止工作,我看到“[object Object]”并且在单击时崩溃:
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?是否不可能在 ngIf 中包含 mat-autocomplete?
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.