Что не так с логическим ИЛИ Angular в атрибуте option? Когда [(ngModel)] используется в select, атрибут [selected] не влияет на выбор
У меня есть возможность выбрать вот так:
<option [selected]=" impulse === 10 || isTraining " value="10">10</option>
Когда у меня есть возможное значение impulse а также isTraining является trueЯ ожидаю, что текущий вариант будет выбран по умолчанию из-за выбранного ключевого слова в раскрывающемся списке, но это не так. Вычислялись ли когда-либо логические операторы для атрибутов, требующих логического значения?
Полный выбор здесь
<select class="form-control" name="flashFormatImpulse" id="field_flashFormatImpulses"
(change)="handleFlashImpulseSelection($event)" [(ngModel)]="impulseSelection" [disabled]="isStarted">
<option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
<option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
<option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
<option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
<option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
<option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
<option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
<option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
<option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
<option [selected]="impulse === 10 || isTraining" value="10">10</option>
</select>
UPD
это для кода ниже:
<div class="form-group">
<label class="form-control-label" jhiTranslate="businesslogic.flashs.flashcard.impulse"
for="field_flashFormatImpulses">Flash Impulse</label>
<select class="form-control" name="flashFormatImpulse" id="field_flashFormatImpulses"
(change)="handleFlashImpulseSelection($event)" [(ngModel)]="impulseSelection" [disabled]="isStarted">
<option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
<option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
<option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
<option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
<option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
<option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
<option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
<option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
<option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
<option [selected]="impulse === 10 || isTraining" value="10">10</option>
</select>
</div>
<div>
<select class="form-control">
<option [selected]="true" value="10">10</option>
</select>
</div>
и эффект все тот же, когда мы меняем код на
<div class="form-group">
<label class="form-control-label" jhiTranslate="businesslogic.flashs.flashcard.impulse"
for="field_flashFormatImpulses">Flash Impulse</label>
<select class="form-control" name="flashFormatImpulse" id="field_flashFormatImpulses"
(change)="handleFlashImpulseSelection($event)" [(ngModel)]="impulseSelection" [disabled]="isStarted">
<option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
<option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
<option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
<option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
<option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
<option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
<option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
<option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
<option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
<option [selected]="true" value="10">10</option>
</select>
</div>
<div>
<select class="form-control">
<option [selected]="true" value="10">10</option>
</select>
</div>
то есть иметь такой же [selected] для обоих (но по-разному).
Т.е. <option [selected]="true" value="10">10</option> работает и <option [selected]="impulse === 10 || isTraining" value="10">10</option> не является
UPD 2
Вот как выглядит код ниже:
<div class="form-group">
<label class="form-control-label" jhiTranslate="businesslogic.flashs.flashcard.impulse"
for="field_flashFormatImpulses">Flash Impulse</label>
<select class="form-control" name="flashFormatImpulse" [(ngModel)]="impulseSelection" id="field_flashFormatImpulses"
(change)="handleFlashImpulseSelection($event)" [disabled]="isStarted">
<option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
<option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
<option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
<option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
<option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
<option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
<option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
<option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
<option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
<option [selected]="impulse === 10 || isTraining" value="10">10</option>
</select>
</div>
<div class="form-group">
<select class="form-control" >
<option *ngIf="!isTraining" [selected]="impulse === 3" value="3">9</option>
<option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
<option [selected]="impulse === 10 || isTraining" value="10">10</option>
</select>
</div>
<div>impulse {{impulse}}, isTraining {{isTraining}}, result: {{impulse === 10 || isTraining}}</div>
<select class="form-control">
<option [selected]="impulse === 10 || isTraining" value="10">10</option>
</select>
Проблема с выбором коррелирует с использованием [(ngModel)]="impulseSelection" для селектора (это привязка для значения, используемая на стороне контроллера) и инициализируется как
impulseSelection = 3;
Таким образом, связанная привязка всегда заменяет значение селектора на 3, пока его там нет. Похоже, единственное решение - заставить этоimpulseSelection значение до 10, когда isTraining присвоено значение true.
1 ответ
Нет причин, по которым это не должно работать. Проверьте свои журналы на наличие ошибок javascript. Если нет, начните с пустого оператора select и восстановите его до того, что у вас есть, по частям, пока не найдете проблему.
Мне также нравится добавлять значения в html, чтобы убедиться, что они такие, как вы думаете. нравится:
<div>impulse {{impulse}}, isTraining {{isTraining}}, result: {{impulse === 10 || isTraining}}</div>
<select class="form-control">
<option [selected]="impulse === 10 || isTraining" value="10">10</option>
</select>