如何过滤从后端拉取的数据角度答案

【问题标题】：how to filter data that pulling from backend in angular如何过滤从后端拉取的数据角度
【发布时间】：2020-10-02 20:05:45
【问题描述】：

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

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

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

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

超级

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

        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
            <mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag">
                {{tag}}
            </mat-option>
        </mat-autocomplete>


  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);
    }

  }

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

【问题讨论】：

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

标签： html angular typescript filter angular-material

【解决方案1】：

无论如何，您的后端都会添加该选项，因为您在验证该值是否存在之前调用了该服务。如果它是一个表单，那么每次您在预先输入的内容中选择某些内容时调用后端都非常奇怪。在我看来，应该在所有内容都正确填写或某种提交事件时完成一次。

我只是在验证中移动了服务调用，并删除了一个 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);
      }

【讨论】：