Angular материал выбран странный выпуск

Question

У меня странная проблема с использованием файла. Чтобы заполнить, у меня есть JSON вот так:

values: [{'id' : 'male', 'label' : 'Homme'}, {'id': 'female', 'label' : 'Femme'}]

Мой HTML выглядит так:

<div class="col-md-2" *ngIf="type === 'select'">
    <mat-form-field>
        <select matNativeControl>
             <option *ngFor="let options of values"
                     [value]="options.id"
                     [selected]="options.id == selectedValue">
                {{options.label}}
             </option>
         </select>
        <mat-hint align="end">{{ label }}</mat-hint>
    </mat-form-field>
</div>

Если selectedValue равно female, нет проблем. Но если он равен male, нет выбранной опции, и я не могу найти, почему

Любая помощь?

Спасибо

Answer 1

Я не совсем уверен, что происходит, но я думаю, что если вы пытаетесь установить значение по умолчанию для выбора, это будет полезно Установить параметр по умолчанию в mat-select .

2-сторонняя привязка, как показано в ссылке, или использование реактивной формы с предустановленным значением, вероятно, ваш лучший выбор.

Удачи!

Answer 2

Сначала вы должны использовать здесь mat-select. Потому что, если вы используете mat-form-field, необходимо вызвать там mat-select или любое другое mat-field. Затем вы должны использовать ваше selectedValue в значении mat-select внутри [(value)], как показано ниже.

<div class="col-md-2" *ngIf="type === 'select'">
    <mat-form-field>
       <mat-select matInput formControlName="yourId" [(value)]="selectedValue"
                    placeholder="Your text">
          <ng-container *ngFor="let options of values">
            <mat-option value="{{options.id}}">{{options.label}}</mat-option>
          </ng-container>
        </mat-select>

    </mat-form-field>

</div>