Angular(角度)-选择dropoverride时如何填充空输入字段

Question

我正在尝试创建DropdownBox，一旦我选择了值，它就会填充输入字段

{ name:'Arnold', item:'Laptop' } 

下拉列表包含CCD_ 1；Arnold"；它将用"0"填充另一个空文本框；笔记本电脑"；。如何做到这一点？

到目前为止，这是我的代码：https://stackblitz.com/edit/mat-dialog-example-qzg1ea

Answer 1

除了我在评论中提到的问题。

事实上，你已经接近答案了。

<mat-select
(selectionChange)="selectedType($event)"
formControlName="name"
style="width:200px"
>
<mat-option *ngFor="let item of items" [value]="item.name">
{{ item.name }}
</mat-option>
</mat-select>

选择/更改下拉列表时，需要触发selectionChange事件。

selectionChange: EventEmitter<C>

用户更改所选值时发出的事件。

在selectedType方法中，从items数组中查找所选项目。如果找到该项，请使用.patchValue()将该值修补到item控件。

items = ELEMENT_DATA;
selectedType(trigger: MatSelectChange) {
...
const selectedItem = this.item.find((x) => x.name == trigger.value);
if (selectedItem) this.fg.controls.item.patchValue(selectedItem.item);
}

示例StackBlitz演示