AngularTypescript設定選擇默認選項

我已經有一段時間沒有在 Angular 中作業了，我正在研究一個現有的系統。

我實作了一個 NgModal 對話框來發送具有以下設計的文本訊息：

我為它實作的代碼如下：

<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.contentId">
          {{messageContentType.messageDescription}}
        </option>
      </select>
  </div>
  <br>
  <div>
    <textarea [(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 } from "../../../../models/inputs/issue.model";
@Component({
    selector: 'textmessage',
    templateUrl: './textmessage.component.html',
    styleUrls: ['./textmessage.component.scss']
})
export class TextMessageComponent implements OnInit {
    messageContentTypes = [
        { 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: any;
    @Input() messageData: IssueTextMessageRequestInput;
constructor(private activeModal: NgbActiveModal, private issueService: IssueService) { }

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

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

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);
}

}

每當我加載此對話框時，下拉選單顯示為空，它永遠不會像我在 ngInit 上設定的那樣設定為陣列中的默認第一個元素。

我還試圖找到一種方法來根據下拉選擇更改文本區域值。我嘗試使用類似于我使用 JQuery 選擇器所做的事情，但我不允許在這個專案中使用 JQuery。

任何線索或幫助都會很有用。

提前致謝。

uj5u.com熱心網友回復：

您對每個選項的價值是messageContentType.contentId：

<option 
  *ngFor="let messageContentType of messageContentTypes" 
  [value]="messageContentType.contentId">

但是您已將 selected 設定為：

this.selectedMessageContentType = this.messageContentTypes[0];

意思是

this.selectedMessageContentType

是相同的

{ contentId: 50, messageDescription: 'Change', messageContent: 'Change something.' }

你的意思是這樣做嗎？

<option 
  *ngFor="let messageContentType of messageContentTypes" 
  [value]="messageContentType">

標籤：

上一篇：反應原生孩子沒有收到更新的道具值

下一篇：nodeexpress typescriptmodulenotfound錯誤