從選擇框中刪除選擇的選項

Question

我正在用角形進行角形應用。

在這里，我給出了一個帶有輸入字段first name and last name的表格，該表格將始終顯示..

在那之后，我有了孩子，單擊添加按鈕將顯示這些孩子，然后單擊刪除按鈕將刪除孩子。

到目前為止，一切正常。

在這里，我正在將數據修補到選擇框中的單擊選項上的輸入。.必要的輸入被修補了。

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

您可以在上面的鏈接中解決，如果選擇了person one選項，則名為property one and property two的值將綁定到輸入，並且在選擇框中將property one突出顯示為選定。

我需要的東西實際上是從這里開始的 ，我有一個刪除按鈕，您可以在演示中看到。如果我單擊刪除按鈕，則最后一個將被刪除，然后再次單擊最后一個被刪除。我有兩個屬性one and two ，如果我刪除按鈕同時刪除輸入， 突出顯示的價值person one在選擇框需要得到不突出 。

這實際上是我的要求。.如果我刪除一個屬性，則它應該仍處於突出顯示狀態。.而完全刪除這兩個屬性，則不應該突出顯示。

希望您能得到我的解釋。.如果有需要，我准備提供。

注意：我使用ng-select ，因為我無法實現該庫，而是使用html 5 select框使其實現。在ng-select庫中，這就像添加和刪除選項一樣。任何使用ng-select的解決方案圖書館也很值得。

請幫助我達到目標。

我在應用程序中具有這樣的實時性：

選擇了三個模板，每個模板具有一個屬性，分別具有1、2、3：

如果選擇一個下拉菜單，則各自的屬性值將作為子項添加。

在這里您可以看到我刪除了屬性名稱3，其父級為模板3，即使刪除了子級，模板3仍顯示在選擇框中

Answer 1

首先，獲取對select的引用，如下所示：

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;

然后，在您的remove函數中，檢查是否已刪除所有元素，如果已刪除，請將select的value設置為null

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

這是StackBlitz的叉子