mat-autocomplete внутри ng-шаблона - PullRequest
Новая
       20

mat-autocomplete внутри ng-шаблона

0 голосов
/ 07 марта 2019

У меня есть компонент, который должен выбирать между двумя 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>

Разве невозможно включить автозаполнение mat в ngIf?

1 Ответ

0 голосов
/ 07 марта 2019

Попробуй так: 

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