Блог

Я использую algolia в angular. Я должен показывать кнопку «Просмотреть больше» только тогда, когда у меня более 8 записей. Я пытаюсь использовать nbHits в if состоянии, но это не работает.
Вот что я сделал до сих пор —

 <ais-instantsearch [config]="productsConfig">
    <ais-configure [searchParameters]="{ hitsPerPage: 8 }"></ais-configure>
    <ais-hits>
       <ng-template let-hits="hits">
             <div class="card">
                <div class="card-body">
                   <div class="row">
                      <div class="col-sm-2">
                         <div class="title">
                            Products
                         </div>
                      </div>
                          <div class="col-sm-10">
                            <ais-stats>
                                 <a href="" class="btn-view-more btn btn-info float-right" *ngIf="hits.nbHits > 8">View All</a>   
                                 {{hits.nbHits}} results found in {{hits.processingTimeMS}}ms.
                            </ais-stats>
                          </div>
                   </div>
                   <section>
                       <div class="row">
                            <div class="col-lg-2"*ngFor="let hit of hits">
                                <figure>
                                   <img src="{{hit.picture}}" class="figure-img img-fluid">
                                   <figcaption class="">{{hit.productName}}</figcaption>
                                </figure>
                             </div>
                       </div>    
                   </section>
                </div>
             </div>
         </ng-template>
    </ais-hits>
</ais-instantsearch>    
  

Как использовать nbHits с условием if?
Любая помощь будет оценена,
Спасибо

Вам нужно использовать an <ng-template> в вашем <ais-stats> виджете, чтобы получить доступ к его состоянию.

 <ais-stats>
  <ng-template let-state="state">
    {{state.nbHits}} results found in {{state.processingTimeMS}}ms.
    <button *ngIf="state.nbHits > 8">View All</button>
  </ng-template>
</ais-stats>
  

Вы можете передать обработчик щелчка, который принимает nbHits и обновляет свойство параметра поиска hitsPerPage с его помощью. Вот рабочий пример.

Пожалуйста, обратите внимание, что по соображениям производительности Algolia не будет возвращать более 1000 обращений за вызов API, даже если вы установили hitsPerPage большее число. Вы можете изменить paginationLimitedTo на уровне индекса, если хотите перейти дальше, чем на 1000 обращений, но это не рекомендуется, поскольку это влияет на производительность. Также обратите внимание, что отключение ограничения не гарантирует, что вы дойдете до конца обращений, только то, что Algolia продвинется как можно дальше в индексе, чтобы получить результаты в разумные сроки.

Также обратите внимание, что попытка отобразить 1000 обращений одновременно может замедлить работу вашего приложения. Обычно лучше использовать шаблон бесконечной прокрутки, который Angular InstantSearch предоставляет из коробки <ais-infinite-hits> .