使用Typescript（Angular6）選擇（下拉）更改時更改文本區域值

我在嘗試根據下拉選擇更改文本區域值時遇到問題。

這是對話框設計：

我為它實作的代碼如下：

<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>

這是打字稿組件：

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 時，我都會得到未定義。
• 當我將文本區域值更改為“測驗”時，文本區域永遠不會顯示更改

任何線索或方向將不勝感激。提前致謝。

uj5u.com熱心網友回復：

因此，首先，要使每個選項的值成為一個物件，而不是一個字串，您需要使用[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將持有對messageContentType從選擇中選擇的參考。

這也應該解決您與 textarea 值有關的問題，因為 nowselectedMessageContentType將是一個物件，而不是一個字串。您根本不需要getSelectedTextMessage()邏輯 - 在 Angular 中不鼓勵使用普通 JS 更改表單元素的值，因為您已經在使用模板表單方法和[ngModel].

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

標籤：

上一篇：為反應組件傳播道具

下一篇：如何在打字稿中從file.d.ts向類宣告添加新的索引簽名？