当 select（下拉）使用 Typescript（Angular 6）更改时更改文本区域值

Question

我在尝试根据下拉选择更改文本区域值时遇到问题。

这是对话框设计：

我为其实现的代码如下：

<div class="modal-content">
<div class="modal-header">
    <h5>Send Text Message</h5>
</div>

<div class="sub-title">
  <b>SELECT MESSAGE TEMPLATE:</b>
</div>

<form>
  <div>
    <select name="textmessage" class="select" [(ngModel)]="selectedMessageContentType" (change)="getSelectedTextMessage()">
        <option *ngFor="let messageContentType of messageContentTypes" [value]="messageContentType">
          {{messageContentType.messageDescription}}
        </option>
      </select>
  </div>
  <br>
  <div>
    <textarea #textmessagecontent [(ngModel)]="selectedMessageContentType.messageContent" class="textarea" maxlength="5000" type="text" name="textmessagecontent" disabled></textarea>
  </div>
</form>

<div class="modal-footer">
  <button type="button" class="btn btn-outline-primary font-weight-bold" (click)="onSendMessageClicked()">SEND</button>
  <button type="button" class="btn btn-primary font-weight-bold" (click)="onCancelClicked()">CANCEL</button>
</div>

这是 Typescript 组件：

import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import { IssueService } from '../../../../services/issue.service';
import { IssueTextMessageRequestInput, IssueMessageContent } from "../../../../models/inputs/issue.model";
@Component({
    selector: 'textmessage',
    templateUrl: './textmessage.component.html',
    styleUrls: ['./textmessage.component.scss']
})
export class TextMessageComponent implements OnInit {
    messageContentTypes : IssueMessageContent[] = [
        { contentId: 50, messageDescription: 'Change', messageContent: 'Change something.' },
        { contentId: 51, messageDescription: 'Send Baseline', messageContent: 'Send Base' },
        { contentId: 52, messageDescription: 'Adapter', messageContent: 'Change to Lead Wire Adapter' }
    ];
    selectedMessageContentType: IssueMessageContent;
    @Input() messageData: IssueTextMessageRequestInput;
constructor(private activeModal: NgbActiveModal, private issueService: IssueService) { }

ngOnInit() {
    this.selectedMessageContentType = this.messageContentTypes[0];
}

onCancelClicked() {
    this.activeModal.close();
}

getSelectedTextMessage() {
        debugger;
        this.textarea.nativeElement.innerText = "test";
    }

onSendMessageClicked() {
    this.messageData.message = this.getMessageContentById(this.selectedMessageContentType).messageDescription;
    console.log(this.messageData);
    /*this.issueService.processAndSendMessageWithIssueActivityTracking(messageData)
    .subscribe((resp) => {});*/
}

getMessageContentById(msgId: number) {
    return this.messageContentTypes.find(content => content.contentId === msgId);
}

}

我尝试按照几个教程进行操作，但仍然遇到以下问题：

当我激活“onchange”事件时，我看到“this.selectedMessageContentType”有 [object Object]，但我无法选择属性。我的意思是，每当我调用 this.selectedMessageContentType.contentId 时，我都会得到 undefined.
当我将文本区域的值更改为“test”时，文本区域从未显示更改

任何线索或方向将不胜感激。提前致谢。

Answer 1

所以，首先，要使每个选项的值成为一个对象，而不是一个字符串，你需要使用 [ngValue]，而不是 [value]，按照官方文档： https://angular.io/api/forms/NgSelectOption#properties。在您的情况下，更改将如下所示：

<select name="textmessage" class="select" [(ngModel)]="selectedMessageContentType">
  <option *ngFor="let messageContentType of messageContentTypes" [ngValue]="messageContentType">
   {{messageContentType.messageDescription}}
 </option>
</select>

现在 selectedMessageContentType 将保存对 select 编辑的 messageContentType 的引用 select。

这也应该可以解决文本区域值的问题，因为现在 selectedMessageContentType 将是一个对象，而不是字符串。您根本不需要 getSelectedTextMessage() 逻辑 - 在 Angular 中不鼓励使用普通 JS 更改表单元素的值，因为您已经在 [ngModel].[= 中使用模板表单方法20=]

这是建议解决方案的 StackBlitz： https://stackblitz.com/edit/angular-ivy-ytvrp2?file=src/app/app.component.html

当 select（下拉）使用 Typescript（Angular 6）更改时更改文本区域值

change text area value when select (dropdown) changes using Typescript (Angular6)

angular

typescript

drop-down-menu

textarea

onchange