angular - Angular Ng-Select 项目未更新
问题描述
嗨,当用户键入内容时,我试图从服务器更新项目。
这是我到目前为止所尝试的
<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;
}
});
}
}
它是第一次工作或重点工作我是这项技术的新手,尝试了各种方法都没有工作请指导正确的路径我在绑定之前尝试了 close() 并在绑定值之后尝试了 open() 它的工作但搜索燕鸥要走了,非常感谢
解决方案
推荐阅读
- mysql - 为什么在 Workbench 中有效的 MySql 查询在 phpmyadmin 中返回语法错误?
- javascript - 反应前端未找到PHP后端文件错误
- wordpress - 多种帖子类型的 WPGraphQL 查询片段
- kubernetes - Istio 普罗米修斯联盟
- tensorflow - 我无法在 Anaconda 上使用 tensorflow
- laravel - Laravel Eloquent 降序
- c++ - 对 std::vector 使用嵌套 [ ] 操作
- google-apps-script - Google App Script UrlFetchApp.fetch 抛出地址不可用错误
- amazon-dynamodb - 如何根据另一个属性的条件更新 dynamodb 属性
- python-3.x - 如何使用 python 的 docxtpl 正确创建超链接?