从typescript angular 6中选择默认选项值

Question

我有一个这样的选择HTML:

<select ng-model='nrSelect' class='form-control'>                                                                
    <option value='47'>47</option>
    <option value='46'>46</option>
    <option value='45'>45</option>
</select>

如何从例如47的typescript中选择默认值？

Answer 1

你可以这样做:

<select  class='form-control' 
        (change)="ChangingValue($event)" [value]='46'>
  <option value='47'>47</option>
  <option value='46'>46</option>
  <option value='45'>45</option>
</select>

// Note: You can set the value of select only from options tag. In the above example, you cannot set the value of select to anything other than 45, 46, 47.

在这里,你可以用这个.

Answer 2

app.component.html

<select [(ngModel)]='nrSelect' class='form-control'>
  <option value='47'>47</option>
  <option value='46'>46</option>
  <option value='45'>45</option>
</select>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  nrSelect = 47
}

Answer 3

对于反应形式，我设法通过使用以下示例使其有效（可以将47替换为其他值或变量）：

<div [formGroup]="form">
  <select formControlName="fieldName">
    <option
        *ngFor="let option of options; index as i"
        [selected]="option === 47"
    >
        {{ option }}
    </option>
  </select>
</div>

Answer 4

正确的方法是：

<select id="select-type-basic" [(ngModel)]="status">
    <option *ngFor="let status_item of status_values">
    {{status_item}}
    </option>
</select>

如果值是动态的，则应避免在选项内部，因为这将设置“选择字段”的默认值。默认选择应与 [(ngModel)] 绑定，选项应同样声明。

status : any = "47";
status_values: any = ["45", "46", "47"];

Answer 5

如果你使用 Angular 的，FormBuilder这是要走的路（至少对于Angular 9来说）：

HTML 视图：yourelement.component.html

用于[formGroup]引用表单变量，并用于formControlName引用表单的内部变量（均在 TypeScrit 文件中定义）。最好用于[value]引用某种类型的选项 ID。

<form [formGroup] = "uploadForm" (ngSubmit)="onSubmit()">
   . . .html
   <select class="form-control" formControlName="form_variable" required>
       <option *ngFor="let elem of list" [value]="elem.id">{{elem.nanme}}</option>
   </select>
   . . .
</form>

逻辑文件：yourelement.component.ts

FormBuilder在对象的初始化中，在ngOnInit()函数中，设置您想要的默认值作为默认选择。

<form [formGroup] = "uploadForm" (ngSubmit)="onSubmit()">
   . . .html
   <select class="form-control" formControlName="form_variable" required>
       <option *ngFor="let elem of list" [value]="elem.id">{{elem.nanme}}</option>
   </select>
   . . .
</form>

Answer 6

超文本标记语言

<select class='form-control'>
    <option *ngFor="let option of options"
    [selected]="option === nrSelect"
    [value]="option">
        {{ option }}
    </option>
</select>

打字稿

nrSelect = 47;
options = [41, 42, 47, 48];

Answer 7

首先或所有您使用的 ng-model 被认为是 angularjs 语法。使用[(ngModel)]默认值代替

应用组件.html

<select [(ngModel)]='nrSelect' class='form-control'>
    <option value='47'>47</option>
    <option value='46'>46</option>
    <option value='45'>45</option>
</select>

App.component.ts

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: [ './app.component.css' ] 
}) 

export class AppComponent { 
    nrSelect:string = "47" 
}

Answer 8

我对 Angular6 也有类似的问题。浏览了很多帖子后。我必须在 app.module.ts 中导入 FormsModule ，如下所示。

import {FormsModule} from '@angular/forms';

然后我的 ngModel 标签就起作用了。请尝试这个。

<select [(ngModel)]='nrSelect' class='form-control'>                                                                
                                <option [ngValue]='47'>47</option>
                                    <option [ngValue]='46'>46</option>
                                    <option [ngValue]='45'>45</option>
</select>

Answer 9

我认为最好的方法是将它与 ngModel 绑定。

<select name="num" [(ngModel)]="number">
                <option *ngFor="let n of numbers" [value]="n">{{n}}</option>
              </select>

并在 ts 文件中添加

number=47;
numbers=[45,46,47]