Html 如何在angular中筛选从后端提取的数据

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

因此，在我的后端，我有“图表”和“地图”两个词，我找到了一种方法，让用户能够只搜索这个。如果我输入除此之外的用户类型并按enter键，则不会发生任何事情

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

我不想像这样硬编码（input==“Chart”| | input==“Map”），因为我们稍后将在后端添加更多数据

超级控制台日志（“添加”，标记））； this.snackbar.open（input.value+“已添加为超级标记。”，“”，{duration:2500}）； 如果（（值| |“”）.trim（））{ if（this.allSuperTagNames.find（（f）=>f.toUpperCase（）==value.toUpperCase（）） {this.superTags.push（{tag:value.trim（），type:TagType.super}）；} //重置输入值 如果（输入）{ input.value=''； } this.tagCtrl.setValue（null）； } 否则{ const input=event1.option； const value=event1.option.value； this.tagService.addTag（this.u workspace.guid，'workspace'，value）.subscribe（（tag）=>console.log（“added”，tag））； this.snackbar.open（input.value+“已添加为超级标记。”，“”，{duration:2500}）； 如果（（值| |“”）.trim（））{ if（this.allSuperTagNames.find（（f）=>f.toUpperCase（）==value.toUpperCase（）） {this.superTags.push（{tag:value.trim（），type:TagType.super}）；} 如果（输入）{ input.value=''； } this.tagCtrl.setValue（null）； } }

---

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

您的后端正在添加该选项，无论是什么原因，因为您在验证该值是否存在之前调用了该服务。如果它是一个表单，那么每次在typeahead中选择某个内容时都调用后端是非常奇怪的。在我看来，它应该做一次，当一切都填写妥当或在某种提交事件

我只是将服务调用移动到验证中，并删除了一个if，它只用于分配输入和值，但复制了大约10行。现在，您有了一个if来指定该值，然后后跟上一个if的内容

    add(event: MatChipInputEvent, event1: MatAutocompleteSelectedEvent): void {
        const input = event.input;
        const value = event.value;
        if (event1 === null) {
          input = event.input;
          value = event.value;
        else {
          input = event1.option;
          value = event1.option.value;
        }

        if ((value || '').trim()) { 
            if (this.allSuperTagNames.find((f) => f.toUpperCase() === value.toUpperCase())) 
            {
                this.superTags.push({ tag: value.trim(), type: TagType.super }); 
                this.tagService.addTag(this._workspace.guid, 'workspace', value).subscribe((tag) => console.log("added", tag));
                this.snackbar.open(input.value + " has been added as super tag.", " ", { duration: 2500 });
            } 
         } 

          // Reset the input value
         if (input) {
            input.value = '';
         }
         this.tagCtrl.setValue(null);
      }

---

如果是搜索，为什么要添加内容？您正在尝试构建什么类型的组件？您好。因此，我希望用户能够从列表中进行搜索，并将选定/键入的数据推送到其特定的工作区。这和这个（）非常相似，但就像我的问题一样，看起来你可以在已经提供的芯片之外创建其他芯片。我正在搜索和创建与我的项目中的stackblitz示例相同的芯片，但我希望用户能够从后端已经提供的内容中搜索和添加，而不是让他们能够创建一个新的。所以基本上是一个typeahead，可以过滤后端提供的数据？啊…看起来是这样的，刚开始学习Angular，所以从未听说过typeahead。但我很好奇，我将创建多个芯片，并在用户输入旁边显示结果，就像我向您展示的示例一样，那么您知道这是否能够做到吗？。。你能帮我实现吗？您提供的示例不允许选择不存在的内容，因此这正是您所需要的

  tagCtrl = new FormControl();
  superTags: Tag[] = [];
 filteredSuperTags: Observable<String[]>;
  allsuperTags: Array<Tag> = [];
  allSuperTagNames: Array<String> = new Array<String>();
  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));
      this.snackbar.open(input.value + " has been added as super tag.", " ", { duration: 2500 });


      if ((value || '').trim()) { 
        if (this.allSuperTagNames.find((f) => f.toUpperCase() === value.toUpperCase())) 
        {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));
      this.snackbar.open(input.value + " has been added as super tag.", " ", { duration: 2500 });

      if ((value || '').trim()) { 
        if (this.allSuperTagNames.find((f) => f.toUpperCase() === value.toUpperCase())) 
        {this.superTags.push({ tag: value.trim(), type: TagType.super }); } } 

      if (input) {
        input.value = '';
      }
      this.tagCtrl.setValue(null);
    }

  }

    add(event: MatChipInputEvent, event1: MatAutocompleteSelectedEvent): void {
        const input = event.input;
        const value = event.value;
        if (event1 === null) {
          input = event.input;
          value = event.value;
        else {
          input = event1.option;
          value = event1.option.value;
        }

        if ((value || '').trim()) { 
            if (this.allSuperTagNames.find((f) => f.toUpperCase() === value.toUpperCase())) 
            {
                this.superTags.push({ tag: value.trim(), type: TagType.super }); 
                this.tagService.addTag(this._workspace.guid, 'workspace', value).subscribe((tag) => console.log("added", tag));
                this.snackbar.open(input.value + " has been added as super tag.", " ", { duration: 2500 });
            } 
         } 

          // Reset the input value
         if (input) {
            input.value = '';
         }
         this.tagCtrl.setValue(null);
      }