mat-autocomplete отображает всегда одно и то же имя с Акитой - PullRequest
Новая
       33

mat-autocomplete отображает всегда одно и то же имя с Акитой

0 голосов
/ 01 сентября 2018

У меня проблема с мат-автозаполнением моей формы. Когда я пишу что-то в поле, оно дважды показывает последнюю запись в моей базе данных с тем же именем:

example

database

Я использую Akita - Управление состояниями для Angular в своем проекте, и я не могу найти основную причину этой проблемы. Может быть, вы можете мне помочь?

Вот мой код:

ассистенты-page.component.html 

<!-- Some code -->

<!-- Nationality -->
<ng-container *ngIf="!(loading$ | async); else loadingTpl">

  <mat-form-field>
    <input matInput type="text" placeholder="Nationalité" formControlName="nationality" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let nationality of nationalities$ | async" [value]="nationality">
         {{ nationality.name }}
      </mat-option>
     </mat-autocomplete>
   </mat-form-field>

   </ng-container>

   <ng-template #loadingTpl>Loading...</ng-template>

ассистенты-page.component.ts 

export class AssistantsPageComponent implements OnInit, OnDestroy {
  /* Some code */

  loading$: Observable<boolean>;
  nationalities$: Observable<Nationality[]>;

  constructor(
    private assistantsQuery: AssistantsQuery,
    private assistantsService: AssistantsService,
    private fb: FormBuilder,
    private nationalitiesQuery: NationalitiesQuery,
    private nationalitiesService: NationalitiesService,
  ) { }

  ngOnInit() {
    this.formGroup = this.fb.group({
      title: ['', Validators.required],
      lastName: ['', Validators.required],
      firstName: ['', Validators.required],
      nationality: null
    });

    this.nationalitiesService.get().subscribe();

    this.loading$ = this.nationalitiesQuery.selectLoading();

    this.nationalities$ = this.formGroup.get('nationality').valueChanges.pipe(
      switchMap(value => this.nationalitiesQuery.selectAll({
         filterBy: entity => entity.name.toLowerCase().includes(value)
      }))
    );

    this.persistForm = new PersistNgFormPlugin(this.assistantsQuery, createAssistant).setForm(this.formGroup);
  }

  displayFn(nationality?: Nationality): string | undefined {
    return nationality ? nationality.name : undefined;
  }

nationalities.service.ts 

export class NationalitiesService {

/* Some code */

  get(): Observable<Nationality[]> {
    const request = this.nationalitiesDataService.get().pipe(
      tap(response => this.nationalitiesStore.set(response)
    ));

    return this.nationalitiesQuery.isPristine ? request : noop();
  }

национальности-data.service.ts 

export class NationalitiesDataService {

  /* Some code */

  get(): Observable<Nationality[]> {
    return this.http.get<Nationality[]>(this.url);
  }

Любой вход для решения этой проблемы?

Заранее спасибо за помощь

1 Ответ

0 голосов
/ 02 сентября 2018

Единственная причина, по которой я могу придумать, состоит в том, что ваш id ключ отличается от id. Например: 

entity = { id: 1, title: '' }

Вы можете определить пользовательский ключ идентификатора, например так: 

@StoreConfig( { name: '', idKey: 'todoId' } )
class TodosStore {}

entity = { todoId: 1, title: '' }

Ознакомьтесь с документами .

...