取下选择框中选择的选项(Remove the selected option from select

我正在用角角的形式应用。

在这里，我已经给输入字段的表单first name and last name ，将始终显示..

之后，我有这将在点击添加按钮来显示，孩子们将得到上点击删除按钮删除儿童。

截至目前，一切工作正常。

在这里，我想提出的数据从选择框中点击选项输入的补丁。该neccessary输入被修补..

HTML：

<div>
    <form (ngSubmit)="onSubmit()" [formGroup]="form">

        <div *ngFor="let question of questions" class="form-row">
            <ng-container *ngIf="question.children">
                <div [formArrayName]="question.key">
                    <div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
                        <div *ngFor="let item of question.children">
                            <app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
                        </div>
                    </div>
              <select multiple (change)="changeEvent($event)">
      <option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
    </select>
                </div>
            </ng-container>
            <ng-container *ngIf="!question.children">
                <app-question [question]="question" [form]="form"></app-question>
            </ng-container>
        </div>

        <div class="form-row">
            <!-- <button type="submit" [disabled]="!form.valid">Save</button> -->
    </div>
  </form> <br>

  <!-- Need to have add and remove button.. <br><br> -->

  <button (click)="addControls('myArray')"> Add </button>
  <button (click)="removeControls('myArray')"> Remove </button><br/><br/>
  <pre>
{{form?.value|json}}
</pre>
</div>

TS：

 changeEvent(e) {
    if (e.target.value == 1) {
      let personOneChild = [
        { property_name : "Property one" },
        { property_name : "Property two" },
      ]
      for (let i = 0; i < personOneChild.length; i++) {
        this.addControls('myArray')
      }
      this.form.patchValue({
          'myArray': personOneChild
        });
    } 
    if (e.target.value == 2) {
      let personTwoChild = [
        { property_name : "Property three" },
        { property_name : "Property four" },
        { property_name : "Property five" },
      ]
      for (let i = 0; i < personTwoChild.length; i++) {
        this.addControls('myArray')
      }
      this.form.patchValue({
          'myArray': personTwoChild
        });
    }
  }

  addControls(control: string) {
    let question: any = this.questions.find(q => q.key == control);
    let children = question ? question.children : null;
    if (children)
      (this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
  }

  removeControls(control: string) {
    let array = this.form.get(control) as FormArray;
    array.removeAt(array.length - 1);
  }

清除工作stackblitz： https://stackblitz.com/edit/angular-x4a5b6-fnclvf

您可以解决在上面的链接，如果你选择的人一个选项，然后命名值property one and property two被绑定到输入和选择框的property one作为选择的高亮显示..

我需要的东西实际上就是从这里 ，我有一个删除按钮，可以在演示中看到。如果我点击删除按钮，一个在最后将得到去除，然后再次单击最后被删除。这里我我有两个属性one and two ，如果我删除按钮同时删除输入， 突出显示的价值person one在选择框需要得到不突出 。

其实，这是我的要求..如果我删除任何一个属性，则它应该还处于高亮状态..虽然完全删除这两个属性不应该被突出..

希望你得到了我的解释一点。如果任何需要我愿意提供。

注：我用NG-选择它，因为我无法实现该库，我与HTML 5的选择框，使得它。在NG-选择库就会像添加和删除选项。与NG-选择任何解决方案图书馆也明显..

请帮我达到的效果，请..

我在应用这样具有实时性：

选择的三个模板，每个人都有一，二，三分别为一个属性：

如果选择下拉然后相应的属性值将被添加为儿童。

在这里，您可以看到我已经删除了这些属性名三为它的父模板三个模板3仍显示在选择框，即使我删除其子

Answer 1:

首先，获得一个参考选择，就像这样：

HTML：

<select multiple (change)="changeEvent($event)" #mySelect>
  <option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>

TS：

import { ViewChild } from '@angular/core';

// ...

@ViewChild('mySelect') select;

然后，在你删除功能，检查是否所有元素都被删除，如果他们有，设定value的的select ，以null

if (array.length === 0) {
  this.select.nativeElement.value = null;
}

这里是StackBlitz的叉子

文章来源: Remove the selected option from select box