Question

我正在使用angular 6应用程序，并且我尝试使用输入框进行，而没有任何任何第三方插件，jQuery，数据列表，选择框进行多次选择，它是纯输入框，基于打字稿。

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

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

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。

Answer 2

请尝试这个。

component.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 3

我不是Angular开发人员，但我尝试执行解决方案。从建议中选择的短语存储在“选择的”变量中。您可以输入内容并将其除以“，”，将其存储在“选择的”中，就像在角形材料碎片中一样。

Stackblitz

如何删除所选的输入值

3 个答案: