Angular Ng-Select элементы не обновляются - PullRequest
Новая
       26

Angular Ng-Select элементы не обновляются

0 голосов
/ 05 апреля 2020

Привет. Я пытался обновить элементы с сервера, когда пользователь что-то вводит.

Это то, что я пробовал до сих пор 

<form [formGroup]="mainForm" class="exclusive-search-componenet">
<fieldset class="m-0">
<ng-select #searchBox [items]="typeAhead"
           [loading]="typeAheadLoading"
           bindLabel="mainTitle"
           bindValue="id"
           [virtualScroll]="true"
           placeholder="search events, tags and more ..."
           formControlName="token"
           class="exclusive-search-select"
           (focus)="fetchTypeAheadFocus()"
           (search)="fetchTypeAheadSearch($event)"
           >

  <ng-template ng-notfound-tmp let-searchTerm="searchTerm">
    <div class="ng-option disabled">
      No record found for <span *ngIf="searchTerm">'{{searchTerm}}'</span>
    </div>
  </ng-template>
  <ng-template ng-option-tmp let-item="item" let-i="index">
    <div class="media align-items-center">
      <div class="avatar bg-primary mr-1">
        <div class="avatar-content">
          <i class="avatar-icon bx bx-show"></i>
        </div>
      </div>

      <div class="media-body mt-25 mb-25">
        <h6 class="m-0" [textContent]="item.mainTitle"></h6>
        <span class="font-size-small" [textContent]="item.subTitle"></span>
      </div>
    </div>
  </ng-template>
  <ng-template ng-label-tmp let-item="item">
    <div class="media align-items-center">
      <div class="avatar mr-1 bg-primary bg-lighten-2">
        <span class="avatar-content">LD</span>
      </div>
      <div class="media-body mt-25 mb-25">
        <h6 class="m-0" [textContent]="item.mainTitle"></h6>
        <span class="font-size-small" [textContent]="item.subTitle"></span>
      </div>
    </div>
  </ng-template>
</ng-select>

Компонент: 

@Component({
  selector: 'app-exclusive-search',
  templateUrl: './exclusive-search.component.html',
})
export class ExclusiveSearch implements OnInit, OnDestroy {

typeAheadLoading: boolean;
typeAhead: Array<IExclusivesTypeAhead>;
mainForm: FormGroup;

searchToken: string;
searchSubscription: Subscription;

constructor(
  private readonly formBuilder: FormBuilder,
  private readonly httpService: HttpService) {

  this.typeAhead = new Array<IExclusivesTypeAhead>();
  this.searchToken = 'searchToken';
  this.buildForm();

}

ngOnInit(): void {}

ngOnDestroy(): void {
  this.searchSubscription.unsubscribe();
}

buildForm(): void {
  const formGroup = {
    token: [null],
    [this.searchToken]: [null]
  };

this.mainForm = this.formBuilder.group(formGroup);

this.searchSubscription = this.mainForm.get(this.searchToken)
  .valueChanges.pipe(debounceTime(500), distinctUntilChanged())
  .subscribe(() => {
    this.fetchTypeAheadHelper(this.mainForm.value[this.searchToken]);
  });
}

fetchTypeAheadFocus() {
  if (!this.typeAhead || this.typeAhead.length <= 0) {
    this.fetchTypeAheadHelper();
  }
}

fetchTypeAheadSearch(event: {}) {
  const token = event["term"];
  if (token) {
    this.mainForm.patchValue({
      [this.searchToken]: token
    });
  }
}

private fetchTypeAheadHelper(token: string = null) {
  this.typeAheadLoading = true;

  this.httpService.post<ICommonResponse>(Api.build(Api.exclusives, Api.typeAhead), { mainTitle: token, pageSize: 4 })
  .pipe(finalize(() => { this.typeAheadLoading = false }))
  .subscribe((response: ICommonResponse) => {
    switch (response.status) {
      case CommonStatus.Success:
        /*LIST IS NOT UPDATING ITS ALWAYS GIVING ME NO RECORD FOUND*/
        /*But when i blur and focus it again my new list is showing again*/
        this.typeAhead = response.data as Array<IExclusivesTypeAhead>;
        break;
      }
    });
  }
}

Это работает в первый раз или в фокусе. Я новичок в этой технологии, пробовал разными способами, но ни один из них не работает, пожалуйста, укажите правильный путь, который я пробовал закрыть () перед привязкой и открыть ( ) после того, как значения привязки сработали, но поисковая тройка отключена, большое спасибо

...