Выберите значение параметра по умолчанию из машинописного углового 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?

Answer 1

Я управляю этим, делая так =>

<select class="form-control" 
        [(ngModel)]="currentUserID"
        formControlName="users">
        <option value='-1'>{{"select a user" | translate}}</option>
            <option 
            *ngFor="let user of users"
            value="{{user.id}}">
            {{user.firstname}}
   </option>
</select>

Answer 2

Для реактивной формы мне удалось заставить ее работать, используя следующий пример (47 можно заменить другим значением или переменной):

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

Answer 3

Я думаю, что лучший способ сделать это, чтобы связать его с ngModel.

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

и в файл ts добавить

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

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

У меня были похожие проблемы с Angular6. Пройдя много постов. Мне пришлось импортировать FormsModule, как показано ниже в app.module.ts.

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 6

Вы можете сделать это:

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

Сначала вы используете ng-модель, которая считается синтаксисом angularjs. Вместо этого используйте [(ngModel)] со значением по умолчанию

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:string = "47" 
}

Answer 8

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
}