Javascript 如何删除选定的输入值

我正在使用angular 6应用程序，我正在尝试使用输入框进行多重选择，而不使用任何第三方插件、jquery、datalist、select box，它是纯输入框，基于typescript

HTML:

<div class="autocomplete">
  <input name="suggestion" type="text" placeholder="User" (click)="suggest()" [formControl]="typeahead">

  <div class="autocomplete-items" *ngIf="show">
    <div *ngFor="let s of suggestions" (click)="selectSuggestion(s)">{{ s }}</div>
  </div>
</div>

{{s}

TS：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  suggestions: string [] = [];
  suggestion: string;
  show: boolean;
  typeahead: FormControl = new FormControl();

  fieldHistory: string [] = [];

  suggest() {
    this.suggestions = this.users;
    this.show = true;
  }

  selectSuggestion(s) {
    this.suggestion = "";

    this.fieldHistory.push(s)
    for (let i = 0; i < this.fieldHistory.length; i++) 
      this.suggestion = this.suggestion + " " + this.fieldHistory[i];

    this.typeahead.patchValue(this.suggestion);
    this.show = false;
  }


  users = ['First User', 'Second User', 'Third User', 'Fourth User'];
}

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormControl}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
建议：字符串[]=[]；
建议：字符串；
显示：布尔；
typeahead:FormControl=newformcontrol（）；
fieldHistory:字符串[]=[]；
建议（）{
this.suggestions=this.users；
this.show=true；
}
选择建议{
此项建议=”；
此.fieldHistory.push（s）
for（设i=0；i

在这里，我需要删除像角材料芯片选择的值，用户可以选择多个值，但他也可以删除错误选择的值

如何为每个项目设置删除选项，以删除输入框中错误选择的值

Stackblitz链接到多选选项

---

在上述链接中进行任何编辑以使“multi-select with delete”选项的效果也会更好。

也许您应该为

用户

对象使用

选定的

字段，如下所示：

users = [
    {
        name: 'First User',
        selected: false
    },
    {
        name: 'Second User',
        selected: false
    },
    {
        name: 'Third User',
        selected: false
    },
    {
        name: 'Fourth User',
        selected: false
    }
]

新的html将是：

使用者
{{user.name}。
也许您应该为
用户
对象使用一个
选定的
字段，如下所示：

users = [
    {
        name: 'First User',
        selected: false
    },
    {
        name: 'Second User',
        selected: false
    },
    {
        name: 'Third User',
        selected: false
    },
    {
        name: 'Fourth User',
        selected: false
    }
]

新的html将是：


使用者
{{user.name}。
请试试这个

组件技术

   import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  suggestions: string [] = [];
  suggestion: string = '';
  show: boolean;
  typeahead: FormControl = new FormControl();

  fieldHistory: string [] = [];

  suggest() {
    this.suggestions = this.users;
    this.show = true;
  }

  selectSuggestion(s,status) {
    this.suggestion = '';
    if(status){
      this.fieldHistory.push(s);
      this.typeahead.patchValue(this.fieldHistory);
    }else{
      this.fieldHistory.forEach((element,index) => {
        if(element == s){ 
          this.fieldHistory.splice(index,1);
        }
      });
      this.typeahead.patchValue(this.fieldHistory);
    }
  }

  users = ['First User', 'Second User', 'Third User', 'Fourth User'];
}

Html


{{s}
请试试这个

组件技术

   import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  suggestions: string [] = [];
  suggestion: string = '';
  show: boolean;
  typeahead: FormControl = new FormControl();

  fieldHistory: string [] = [];

  suggest() {
    this.suggestions = this.users;
    this.show = true;
  }

  selectSuggestion(s,status) {
    this.suggestion = '';
    if(status){
      this.fieldHistory.push(s);
      this.typeahead.patchValue(this.fieldHistory);
    }else{
      this.fieldHistory.forEach((element,index) => {
        if(element == s){ 
          this.fieldHistory.splice(index,1);
        }
      });
      this.typeahead.patchValue(this.fieldHistory);
    }
  }

  users = ['First User', 'Second User', 'Third User', 'Fourth User'];
}

Html


{{s}
我不是一个有角度的开发人员，但我试着解决这个问题。
从建议中选择的短语存储在“selected”变量中。你可以输入一些东西，然后用“，”除以，将其存储在“选择”中，就像在角材料芯片中一样

我不是一个角度开发人员，但我试着解决这个问题。
从建议中选择的短语存储在“selected”变量中。你可以键入一些东西，然后把它除以“，”来将它存储在“选择”中，比如在角材料芯片中

我在您的解决方案中找不到删除选项。您可以通过再次单击某个字段进行删除。您还可以使用一个图标来设置
用户。单击时，将选中的
设置为
false
。用户可以删除输入框中的任何选定值。不是通过点击下面显示的列表。你一定要使用它，因为它正是你想要的。请参阅关于这一点的
自定义标记
部分，我不应该这样做，因为我已经在问题中提到了。。应用程序中不应包含任何库。我在您的解决方案中找不到删除选项。您可以通过再次单击某个字段来删除。您还可以使用一个图标来设置
用户。单击时，将选中的
设置为
false
。用户可以删除输入框中的任何选定值。不是通过点击下面显示的列表。你一定要使用它，因为它正是你想要的。请参阅关于这一点的
自定义标记
部分，我不应该这样做，因为我已经在问题中提到了。。应用程序中不应包含任何库..勾选和取消勾选在您的解决方案中无法正常工作。。例如，如果我选中所有四个复选框，并且如果我取消选中
第三个用户
，那么
第三个用户和第四个用户
将从输入框中删除，而不是仅删除
第三个用户
。。。如果它被修复了，那将是一个很好的解决方案。。无论如何，感谢您的时间和帮助。请替换“选择建议”功能。我已经更新了上述代码。请勾选我们。勾选和取消勾选在您的解决方案中无法正常工作。。例如，如果我选中所有四个复选框，并且如果我取消选中
第三个用户
，那么
第三个用户和第四个用户
将从输入框中删除，而不是仅删除
第三个用户
。。。如果它被修复了，那将是一个很好的解决方案。。无论如何，感谢您的时间和帮助。请替换“选择建议”功能。我已经更新了上述代码。请勾选我们。我感谢您作为angular的新贡献者花费宝贵的时间和帮助。我感谢您作为angular的新贡献者花费宝贵的时间和帮助。。