1

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

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

是否不可能在 ngIf 中包含 mat-autocomplete?

4

2 回答 2

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>
于 2020-01-27T09:48:01.023 回答
-1

试试这样:

<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>
于 2019-03-07T19:43:08.480 回答