角度-为nbgDropDown设置默认值

Question

我有此表单，用户可以在其中输入其猫的信息（名称和颜色），然后将其保存到Firebase数据库中。
如何在新Cat上将颜色“ Orange”设置为默认值，但仍保留编辑时的Cat颜色？

我想要的

新猫形：

  

猫名：占位符

     

猫颜色：橙色<-此

编辑Cat表单：

  

猫名：UserEnteredName

     

猫颜色：UserChoseColor

我有什么

新猫形：

  

猫名：占位符

     

猫的颜色：（空）<-这

编辑Cat表单：

  

猫名：UserEnteredName

     

猫颜色：UserChoseColor

HTML：

<div ngbDropdown placement="top" class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>{{cat.color}}</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button *ngFor="let color of getColors()" ngbDropdownItem (click)="setColor(color)">{{color}}</button> <!-- THIS -->
  </div>
</div>
<button (click)="onSubmit()">Save Kitty</button>

TS：

public cat: MyCat = new MyCat({});

public setCat(cat: MyCat) {
  this.cat = cat;
  this.form.setValue({
    catName: this.cat.name,
  });
}

get nameForm(): FormControl {
  return this.form.controls.catName as FormControl;
}

getColors(): Array<string> {
  return [
    'White',
    'Black',
    'Orange'
  ];
}

setColor(color: string) {
  this.cat.color = color;
}

onSubmit() {
  if (this.form.valid) {
    const kitty = new MyCat({});
    kitty.name = this.nameForm.value;
    kitty.color = this.cat.color;
  }
}