Предварительный выбор варианта выбора не работает в форме, управляемой шаблоном

#angular #forms

Вопрос:

Я создаю кучу ящиков выбора через цикл ngFor вместе с внутренним циклом для опций. Если имя поля выбора совпадает с параметром, этот параметр следует выбрать предварительно. Мой код работал, если я не перешел на формы, управляемые шаблонами:

 <div *ngFor="let currentFeedKey of currentFeedKeys" class="row mb-3">
            <label class="form-label" class="col-sm-6 col-form-label">{{ currentFeedKey }}</label>
            <select class="form-select" class="col-sm-6" ngModel name="{{currentFeedKey}}" #currentFeedKey="ngModel">
                <option>Bitte auswählen...</option>
                <option *ngFor="let wantedFeedKey of wantedFeedKeys; let i = index" [value]="wantedFeedKey"
                    [selected]="wantedFeedKey === currentFeedKey">{{ wantedFeedKey }}</option>
            </select>
        </div>

Это та часть, которая не работает: [выбрано]=»wantedFeedKey === Текущий ключ»…

тнх

1. есть ли какая-либо причина не использовать простую переменную и [(ngModel)] ? Для меня немного «странно» использовать ссылочную переменную шаблона для управления формой, управляемой шаблоном. Посмотрите документы , убедитесь, что вы чувствуете себя более комфортно

Ответ №1:

Может возникнуть проблема с #currentFeedKey=»ngModel». Здесь вы назначаете ngModel для currentFeedKey. currentFeedKey ссылается на ngModel вместо элемента из currentFeedKeys.

Пожалуйста, внесите следующее изменение и попробуйте. изменение:- Здесь мы создаем новую переменную шаблона с новым именем (модель currentFeedKeyModel) вместо ключа currentFeedKey.

#currentFeedKeyModel=»ngModel»

 <div *ngFor="let currentFeedKey of currentFeedKeys" class="row mb-3">
    <label class="form-label" class="col-sm-6 col-form-label">{{ currentFeedKey }}</label>
    <select class="form-select" class="col-sm-6" ngModel name="{{currentFeedKey}}" #currentFeedKeyModel="ngModel">
        <option>Bitte auswählen...</option>
        <option *ngFor="let wantedFeedKey of wantedFeedKeys; let i = index" [value]="wantedFeedKey"
            [selected]="wantedFeedKey === currentFeedKey">{{ wantedFeedKey }}</option>
    </select>
</div>

Ответ №2:

Спасибо за эту помощь. Вот как я это решил:

 <div *ngFor="let currentFeedKey of currentFeedKeys" class="row mb-3">
                <label class="form-label" class="col-sm-6 col-form-label">{{ currentFeedKey }}</label>
                <select class="form-select" class="col-sm-6" [ngModel]="currentFeedKey" name="{{currentFeedKey}}">
                    <option>Bitte auswählen...</option>
                    <option *ngFor="let wantedFeedKey of wantedFeedKeys" [value]="wantedFeedKey">{{ wantedFeedKey }}</option>
                </select>
            </div>