[英]mat-autocomplete displaying always the same name with Akita
I have an issue with the mat-autocomplete of my form. 我的表格垫自动完成有问题。 When I write something in the field, it shows two times the last entry of my database with the same name :
当我在该字段中写入内容时,它显示的是我数据库中具有相同名称的最后一个条目的两倍:
I'm using Akita - State Management for Angular in my project and I cannot find the root cause of this issue. 我在我的项目中使用Akita-Angular的状态管理,但找不到此问题的根本原因。 Maybe you can help me?
也许你可以帮我吗?
Here is my code : 这是我的代码:
assistants-page.component.html 助理-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>
assistants-page.component.ts 助理-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 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();
}
nationalities-data.service.ts 民族,data.service.ts
export class NationalitiesDataService {
/* Some code */
get(): Observable<Nationality[]> {
return this.http.get<Nationality[]>(this.url);
}
Any input to solve this? 任何输入来解决这个问题?
Thanks in advance for your help 在此先感谢您的帮助
The only reason that I can think of is that your id
key is different than id
. 我能想到的唯一原因是您的
id
密钥不同于id
。 For example: 例如:
entity = { id: 1, title: '' }
You can define custom id key, like this: 您可以定义自定义ID密钥,如下所示:
@StoreConfig( { name: '', idKey: 'todoId' } )
class TodosStore {}
entity = { todoId: 1, title: '' }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.