Почему primeng Autocomplete не работает должным образом и не сообщает об ошибке? - PullRequest
Новая
       3

Почему primeng Autocomplete не работает должным образом и не сообщает об ошибке?

0 голосов
/ 04 марта 2020

Я использую автозаполнение из primeng, за которым следуют примеры заправки (последняя версия).

Но ничего не происходит. Я набираю: «au», но он не завершается и не сообщает об ошибке. в чем может быть проблема? 

<p-autoComplete [(ngModel)]="brand" [suggestions]="brands" [size]="30" [dropdown]="true">
    <ng-template let-brand pTemplate="item">
        <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
            <div style="border:1px solid red;font-size:18px;">{{brand | json}}</div>
        </div>
    </ng-template>
</p-autoComplete>

{{brand | json}}

  brands = [
    { id: 1, name: "audi" },
    { id: 2, name: "BMW" },
    { id: 3, name: "Fiat" },
    { id: 4, name: "Ford" },
    { id: 5, name: "Honda" },
    { id: 6, name: "Jaguar" },
    { id: 7, name: "Mercedes" },
    { id: 8, name: "Renault" },
    { id: 9, name: "Volvo" },
    { id: 10, name: "VW" }
  ];

  brand: string;

Чего мне здесь не хватает?

Stackblitz Demo

1 Ответ

0 голосов
/ 04 марта 2020

Код компонента: 

name = 'Angular';
  brands: string[] = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo', 'VW'];

  filteredBrands: any[];

  brand: string;

  filterBrands(event) {
        this.filteredBrands = [];
        for(let i = 0; i < this.brands.length; i++) {
            let brand = this.brands[i];
            if(brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
                this.filteredBrands.push(brand);
            }
        }
    }

HTML Код: 

<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
    [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true">
    <ng-template let-brand pTemplate="item">
        <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
            <img src="assets/showcase/images/demo/car/{{brand}}.png" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
            <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
        </div>
    </ng-template>
</p-autoComplete>
<span style="margin-left:50px">Brand: {{brand||'none'}}</span>
...