如何在 Angular 中过滤后端的数据

Question

我有用户可以搜索/输入数据的输入，我想知道如何让用户只能搜索后端已经提供的内容并禁止他们创建新数据。

所以在我的后端，我有"图表"和"地图"单词，我想出一种方法让用户只能搜索这个。如果我用户键入其他内容并按回车键，则不会发生任何事情。

现在，如果用户键入这两个文本以外的其他文本并按回车键，它将创建一个新数据并将其推送到后端。

我不想像这样硬编码(输入 == "图表" || 输入 == "地图"(，因为我们稍后将在后端添加更多数据。

超级<=数据类型，如"图表和地图">

<div>
<input matInput #input [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event,null)">
</div>

add(event: MatChipInputEvent, event1: MatAutocompleteSelectedEvent): void {
if (event1 == null) {
const input = event.input;
const value = event.value;
this.tagService.addTag(this._workspace.guid, 'workspace', value).subscribe((tag) => console.log("added", tag));
// Add Tag
if ((value || '').trim()) {
this.superTags.push({ tag: value.trim(), type: TagType.super });
}
// Reset the input value
if (input) {
input.value = '';
}
this.tagCtrl.setValue(null);
}
else {
const input = event1.option;
const value = event1.option.value;
this.tagService.addTag(this._workspace.guid, 'workspace', value).subscribe((tag) => console.log("added", tag));
if (input) {
input.value = '';
}
this.tagCtrl.setValue(null);
}
}

任何建议或帮助将不胜感激。

Answer 1

假设您有suggestions由用户搜索填充的数组。

侦听autocomplete optionActivated事件，当trueonSelected事件将以Enter触发时，绕过添加事件。

add(event: MatChipInputEvent, event1: MatAutocompleteSelectedEvent): void {
const input = event.input;
const value = event.value?.trim();
if (!value || this._optionActivated) {
return;
}   

// Check if value from create event (Enter, Comma) already exists on search result.
const suggested = this.suggestions.find(item => item?.id && item.title === value);
if (suggested) {
console.log("Already exists on search result", suggested)
// add to selection list.
} else {
this.tagService.addTag(this._workspace.guid, 'workspace', value).subscribe((tag) => {
console.log("added", tag)
// add to selection list.
if (input) {
input.value = '';
}
this.tagCtrl.setValue(null);
}
optionActivated(event: MatAutocompleteActivatedEvent) {
this._optionActivated = !!event.option;
}
optionClosed() {
this._optionActivated = false;
}

模板.html：

<mat-autocomplete
#auto="matAutocomplete"
(closed)="optionClosed()"
(optionActivated)="optionActivated($event)"
(optionSelected)="onSelected($event)"
>
<mat-option *ngFor="let tag of suggestions" [value]="tag">
{{ tag.title }}
</mat-option>
</mat-autocomplete>