Angular Typescript 设置 select 默认选项

Question

我已经有一段时间没有在 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>

这是 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 } 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。

任何线索或帮助都会有用。

提前致谢。

Answer 1

每个选项的值是 messageContentType.contentId:

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

但您已将所选内容设置为：

this.selectedMessageContentType = this.messageContentTypes[0];

这意味着

this.selectedMessageContentType

与

相同

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

您是要改用这个吗？

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

Angular Typescript 设置 select 默认选项

Angular Typescript set select default option

angular

typescript

modal-dialog

onchange