下拉菜单中的选定项目绑定到textarea

Question

我想从下拉QuickMessage中获取文本选项到文本区域框（＆＃34;在此输入消息...＆＃34;）。下拉列表是一个弹出框选择器，用于选择要提交给聊天的常用消息。

HTML

<div class="form-group">
<textarea class="form-control"
  rows="3"
   placeholder="Type message here..."></textarea>

<div class="btn-group justify-content-center"
   role="group">
<div ngbDropdown
     placement="top"
     class="btn-group">
  <button class="btn btn-primary"
          id="quick-message"
          ngbDropdownToggle>Quick Message</button>
  <div ngbDropdownMenu
       aria-labelledby="quick-message">
    <button *ngFor="let quickMessage of quickMessages$ | async"
            class="dropdown-item">{{quickMessage}}</button>
  </div>
</div>

TS

 providers: [QuickMessageService]
})
export class UserInputComponent implements OnInit {
quickMessages$: Observable<string[]>;
constructor(private quickMessageService: QuickMessageService) { }

ngOnInit() {
this.quickMessages$ = this.quickMessageService.quickMessages$;
 }

}

服务

this.initFakeData();
}

get quickMessages$(): Observable<string[]>{
return this._quickMessages$.asObservable();
}

private initFakeData() {
this.quickMessages = [
  `Option1`,
  `Option2`,
  `Option3`
];
this._quickMessages$.next(this.quickMessages);
}