如何删除选定的输入值

Question

我正在使用 Angular 6 应用程序，我正在尝试使用输入框进行多项选择没有任何第三方插件、jquery、datalist、选择框，它是纯输入框，基于打字稿。

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>

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'];
}

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

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

Stackblitz链接与多选选项https://stackblitz.com/edit/angular-dndhgv

在上述链接中进行任何编辑以使用删除选项进行多选也将更加明显..

Answer 1

请试试这个。

组件.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,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

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

  <div class="autocomplete-items" *ngFor="let s of suggestions">
    <input type="checkbox" name='{{s}}'  (click)="selectSuggestion(s,$event.target.checked)" />{{s}}
  </div>
</div>

Answer 2

我不是 Angular 开发人员，但我尝试解决问题。 从建议中选择的短语存储在“选择”变量中。您可以键入一些内容并用“，”除以将其存储在“选择”中，就像在角材料芯片中一样。

Stackblitz

Answer 3

也许您应该为您的users 对象使用selected 字段，如下所示：

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

新的 html 将是：

<div class="autocomplete">
    <div (click)="showChoices()" style="border: solid 1px; display: flex">
        <span *ngIf="!selectedUsers.length">Users</span>
        <div *ngFor="let user of selectedUsers">
            {{user.name}} <a style="cursor: pointer" (click)="unselectUser(user)">x</a>
        </div>
    </div>

    <div class="autocomplete-items" *ngIf="show">
        <div *ngFor="let user of users" [ngClass]="user.selected ? 'selected-suggestion' : ''" (click)="selectUser(user)">{{user.name}}</div>
    </div>
</div>

还有 .ts ：

selectedUsers: { name: string, selected: boolean }[] = [];
show: boolean = false;
selectUser(user: { name: string, selected: boolean }) {
    if (!user.selected) {
        user.selected = true;
    }
    this.selectedUsers = this.users.filter((u) => u.selected);
    console.log(this.selectedUsers)
}

unselectUser(user: { name: string, selected: boolean }) {
    if (user.selected) {
        user.selected = false;
    }
    this.selectedUsers = this.users.filter((u) => u.selected);
    console.log(this.selectedUsers)
}

showChoices() {
    if (this.selectedUsers.length) {
        return;
    }
    this.show = !this.show;
}

这是工作的stackblitz。