Angular 如何清除“选择元素”

我有一个设计，通过从下拉列表中选择一个项目，在我的页面中添加一个芯片。我可以通过点击来移除芯片。但是，我似乎无法清除select元素的值。我试过几种方法，但都不管用

使用角度材质选择元素：

使用角度选择元素：

html:

我通过添加一个功能“修复”了这个问题。在添加芯片的过程中，我还从下拉列表中删除了该值。用户不能再选择它，系统也不能

不幸的是，当我删除芯片时，我将该选项添加回下拉列表。如果该选项是最后选择的选项，则会显示在输入框中

不完全（傻瓜）可靠

无论如何，这里是updateadd（）和remove（）方法

removedNames=[]；
添加（选择）：无效{
log（“nameForm”，this.nameForm）；
让selectedName=this.names.find（el=>el.code==selection）.name；
console.log（“添加：”，selectedName，“至”，this.people）
if（this.people.findIndex（person=>person.name===selectedName）<0）{
this.people.push（{name:selectedName}）；
}
this.nameForm=''；
this.removedNames.push（this.names.find（el=>el.code==selection））；
this.names.splice（this.names.findIndex（el=>el.code==selection），1）；
}
移除（芯片）{
让name=chip.target.innerText；
让index=this.people.findIndex（el=>el.name==name）；
这个.people.splice（索引，1）；
this.names.push（this.removedNames.find（el=>el.name==name））；
this.removedNames.splice（this.removedNames.findIndex（el=>el.name==name），1）；
}

---

最后的答案是直接使用formGroup上的patchValue方法修改值

清理ngModel:

this.name='

？一次工作，但第二次失败。另外，我刚刚注意到，它正在添加芯片，尽管我的add（）方法中有if条件<代码>在其他选项之前？当然，在以后的

this.name=''

这真的很奇怪。我在这里试了些东西，但第二次之后就不见了。但是可以肯定的是，您必须设置一个空的

选项

，就像前面提到的@smnbbrv一样。

<div class="chips-overview-example">
  <md-card>
    <md-toolbar color="primary">Dynamic Chips</md-toolbar>
    <md-card-content>
      <md-chip-list>
        <md-chip *ngFor="let person of people" (click)="remove($event)">
          {{person.name}}
        </md-chip>

        <md-select id="names" 
                   placeholder="Names" 
                   [ngModel]="name"
                   (ngModelChange)="add($event)">
          <md-option *ngFor="let name of names" 
                     value="{{name.code}}">
            {{name.name}}
          </md-option>
        </md-select>
      </md-chip-list>
    </md-card-content>
  </md-card>
</div>

import {Component, ElementRef, Output} from '@angular/core';

export interface Person {
  name: string;
}

@Component({
  selector: 'chips-overview-example',
  templateUrl: 'chips-overview-example.html',
  styleUrls: ['chips-overview-example.css']
})
export class ChipsOverviewExample {
  visible: boolean = true;
  @Output() nameForm;

  names = [
    {code: "F",name: "Frank",description: ""},
    {code: "G",name: "George",description: ""},
    {code: "H",name: "Henry",description: ""},
    {code: "I",name: "Inigo",description: ""},
    {code: "J",name: "Jose",description: ""},
    {code: "K",name: "Kevin",description: ""}
  ];

  removedNames = [];

  people: Person[] = [];

  add(selection): void {
    let selected = this.names.find(el => el.code === selection);
    console.log("adding: ", selected, " to ", JSON.stringify(this.people));

    this.people.push({name: selected.name});

    this.removedNames.push(selected);
    this.names.splice(this.names.findIndex(el => el === selected), 1);
  }

  remove(chip) {
    let name = chip.target.innerText;
    let index = this.people.findIndex(el => el.name === name);
    this.people.splice(index, 1);
    this.names.push(this.removedNames.find(el => el.name === name));
    this.removedNames.splice(this.removedNames.findIndex(el => el.name === name), 1);
    this.names.sort(function(a, b) {
      if (a.name < b.name) return -1;
      if (a.name > b.name) return 1;
      return 0;
    });
  }



  toggleVisible(): void {
    this.visible = false;
  }
}

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MaterialModule} from '@angular/material';
import {ChipsOverviewExample} from './chips-overview-example';

@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],

  declarations: [ChipsOverviewExample],
  bootstrap: [ChipsOverviewExample],
  providers: []
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

  removedNames = [];

  add(selection): void {
    console.log("nameForm", this.nameForm);

    let selectedName = this.names.find(el => el.code === selection).name;
    console.log("adding: ", selectedName, " to ", this.people)

    if (this.people.findIndex(person => person.name === selectedName) < 0) {
      this.people.push({name: selectedName});
    }
    this.nameForm = '';
    this.removedNames.push(this.names.find(el => el.code === selection));
    this.names.splice(this.names.findIndex(el => el.code === selection), 1);
  }

  remove(chip) {
    let name = chip.target.innerText;
    let index = this.people.findIndex(el => el.name === name);
    this.people.splice(index, 1);
    this.names.push(this.removedNames.find(el => el.name === name));
    this.removedNames.splice(this.removedNames.findIndex(el => el.name === name), 1);
  }