Angular: [(ngModel)] 没有预先设置 <select> 标签值

Question

我目前正在开发使用 Angular 6 和框架 Ng-Zorro 7.5

构建的前端解决方案

我有一些成功显示为以下代码的原因列表，其中 reasonList 是 Reason

类型的数组

export class Reason{
  id: number;
  name: string;
}

Reasons.component.html

 <div nz-col nzSpan="11">
  <nz-form-item>
    <nz-form-label [nzSm]="10" [nzXs]="24">
      Reason
    </nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <nz-select formControlName="reasonSelectControl" 
      (ngModelChange)="getSelectedReason($event)" nzPlaceHolder="select from list" [(ngModel)]="selectedReason">
        <nz-option *ngFor="let reason of reasonList" nzLabel="{{reason.name}}" nzValue="{{reason.id}}">
        </nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
</div>

我可以显示 reasonList 的整个列表，select 一个值并获取 id，到目前为止一切顺利。现在，当我想在我的 Reasons.component.ts 上预先设置选项并在我的 OnInit 上动态生成一个值时，我无法显示该值，它一直显示空白 space 如下：

我尝试了 selectedReason 的每个可能值：一个带有 Reason Id 的字符串，一个带有 Reason Id 的数字，整个复合体对象并在我的 reasons.component.html 中执行 selectedReason.id，但没有任何效果。你们能帮帮我吗？

Answer 1

如果您有一个包含您的 reasonSelectControl 的 form = new FormGroup( ... )，您可以在 OnInit

上使用它

this.form.get('reasonSelectControl').setValue(this.reasonList[0].name);

我通常使用数组中的第一个元素。

Angular: [(ngModel)] 没有预先设置 <select> 标签值

Angular: [(ngModel)] does not pre set <select> tag value

angular

typescript

frontend

ng-zorro-antd