Question

我一次解决两个问题。幸运的是，我已经将它们缩小了，所以我可以用一个plnkr示例询问一个问题。

以下是我正在处理的plnkr代码：http://plnkr.co/edit/qv1BX7WtpYhw5B92SuoC?p=preview

它是什么？它显示了两张牌，顶牌是使用动态筹码的一个例子。

它有什么问题？第二个芯片被删除后，该芯片的信息会出现在选择框中。

发生了什么？在查看控制台输出时，我已记录了选择的值（<FormArray>this.updateProfileForm.controls["personNames"].value）。它显示的是，当进行第一次选择时，该值为空白。第二次选择值时，该值将成为第一个选择的值。

删除芯片后，我们发现该值仍然是之前选择的值。

我想做什么？我试图将选择的值设置为空白。我还没有发现或找到设定价值的方法。如果我尝试<FormArray>this.updateProfileForm.controls["personNames"].value = '';，它告诉我这对于只有一个getter的属性是不可能的。

我应该使用什么方法将值设置为空白？

- 代码块 -

<!-- app.component.html -->
<form [formGroup]="updateProfileForm" novalidate (ngSubmit)="save(myForm)">
  <div id="names">
    <md-card>
      <md-toolbar color="primary">Dynamic Chips</md-toolbar>
        <md-card-content>
          <md-chip-list>
            <md-chip *ngFor="let person of people" (click)="removePerson($event)">{{person.name}} [X]</md-chip>
            <md-select id="names"
                       placeholder="Names"
                       formControlName="personNames"
                       (ngModelChange)="addPerson($event)">
                <md-option *ngFor="let name of names" value="{{name.code}}">
                    {{ name.name }}
                </md-option>
                <md-option disabled></md-option>
              </md-select>
          </md-chip-list>
      </md-card-content>
    </md-card>
  </div>
</form>

-

// app.component.ts
  updateProfileForm: FormGroup;

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

  removedNames = [];

  people: Person[] = [];

  constructor(private formBuilder: FormBuilder) {      
      this.updateProfileForm = this.formBuilder.group({
        personNames: ['', []]
      });
  }

  addPerson(selection): void {
    let selected = this.names.find(el => el.code === selection);

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

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

    const control = <FormArray>this.updateProfileForm.controls["personNames"]
    console.log("Adding: control.value = ", control.value);

  }

  removePerson(chip) {
    // get name and remove the extra text
    let name = chip.target.innerText;
    name = name.substring(0, name.lastIndexOf(' '));

    // get the index of the name from the people array, then remove it from people (chips)
    let index = this.people.findIndex(el => el.name === name);
    this.people.splice(index, 1);

    // get the custom object from the removedNames array 
    let removedName = this.removedNames.find(el => el.name === name)
    // ... and add it back to names and sort
    this.names.push(removedName);
    this.names.sort(function(a, b) {
      if (a.name < b.name) return -1;
      if (a.name > b.name) return 1;
      return 0;
    });

    // ... and remove it from removedNames
    this.removedNames.splice(this.removedNames.findIndex(el => el.name === name), 1);

    const control = <FormArray>this.updateProfileForm.controls["personNames"]
    console.log("Adding: control.value = ", control.value);
  }

Answer 1

嗯，答案很简单。使用＆＃34; patchValue＆＃34;：https://angular.io/docs/ts/latest/guide/reactive-forms.html#!#set-data

对于上面的代码，我需要使用

this.updateProfileForm.patchValue({
    personNames: ''
});

在removePerson（）方法的末尾。（除去最后两行 - const control...和console.log

如何在angular2

1 个答案: