如何以角度过滤来自后端的数据

Question

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

所以在我的后端我有“图表”和“地图”字样，我想办法让用户只能搜索这个。如果我输入除此之外的其他内容并按 Enter，则不会发生任何事情。

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

我不想像这样 (input == "Chart" || input == "Map") 那样硬编码，因为我们稍后会在后端添加更多数据。

超级

<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>