Angular 4 выбран не работает в опции с * ngFor - PullRequest
Новая
       23

Angular 4 выбран не работает в опции с * ngFor

0 голосов
/ 08 мая 2018

<option [selected]="true"> не работает в Angular 4, если также присутствует ngFor.

Шаблон: 

<form [formGroup]='myForm'>

  <div class="col-sm-9 col-md-4">
    Not working selected, with ngFor
    <select formControlName="nationality" class="form-control">
      <option *ngFor="let elem of nationalityList" [ngValue]="elem.code" [selected]="elem.code=='ITA'">{{ elem.description}}</option>
    </select>
  </div>

  <div class="col-sm-9 col-md-4">
    Working selected, without ngFor
    <select formControlName="nationality" class="form-control">
      <option [ngValue]="nationalityList[0].code" [selected]="nationalityList[0].code=='ITA'">{{ nationalityList[0].description}}</option>
      <option [ngValue]="nationalityList[1].code" [selected]="nationalityList[1].code=='ITA'">{{ nationalityList[1].description}}</option>
    </select>
  </div>

</form>

Компонент: 

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: 'app-prova',
  templateUrl: './prova.component.html',
  styleUrls: ['./prova.component.css']
})
export class ProvaComponent implements OnInit {

  myForm:FormGroup = new FormGroup({
    nationality: new FormControl('')
  });

  nationalityList = [
    { description: 'NATIONALITY_ITALIAN', code: 'ITA' },
    { description: 'NATIONALITY_FOREIGN', code: 'EST' }
  ];

  constructor() { }

  ngOnInit() {
  }

}

Выход:

enter image description here

Итак, вопрос: почему выбранный не работает с ngFor? Это ошибка или я что-то упустил? Как заставить это работать? Спасибо.

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Вы не должны использовать выбранные, попробуйте это: 

<form [formGroup]="myForm">
  <select formControlName="nationality" class="form-control">
    <option *ngFor="let elem of nationalityList" [ngValue]="elem.code">
      {{ elem.description}}
    </option>
  </select>
</form>

И измените определение myForm на: 

myForm:FormGroup = new FormGroup({
  nationality: new FormControl('ITA')
});
0 голосов
/ 08 мая 2018

если это полезно, я использовал для объявления NGmodel в этом отношении и изначально устанавливаю его значение в моем файле ts в соответствии с моими потребностями, вот так: 

   <select [(ngModel)]="myval" formControlName="nationality" class="form-control"> 
    <option *ngFor="let elem of nationalityList" [ngValue]="elem.code" [selected]="elem.code=='ITA'">{{ elem.description}}</option> 
    </select>

в моем файле TS я использовал: 

export class ProvaComponent implements OnInit {
  myval:any; // or your type
  myForm:FormGroup = new FormGroup({
    nationality: new FormControl('')
  });

  nationalityList = [
    { description: 'NATIONALITY_ITALIAN', code: 'ITA' },
    { description: 'NATIONALITY_FOREIGN', code: 'EST' }
  ];

  constructor() { }

  ngOnInit() {
   this.myval = this.nationlaityList[0]; // for example
  }

}

может не всегда работать, но в некоторых случаях выполняет свою работу

...