Question

我有一个组件应根据输入值在两个mat-autocomplete之间进行选择。

两个mat-autocomplete都可以不使用ngIf，但是在包含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>

是否可以在ngIf中包含mat-autocomplete？

Answer 1

     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>

Answer 2

像这样尝试：

<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>

ng-template内的mat-autocomplete

2 个答案: