Pracuję nad aplikacją Angular 5. Mam przycisk "Płeć", którego wartość to wstępnie wypełniony wybór radiowy w oparciu o wartość, jaką otrzymuje i muszę wiedzieć, jak używać ng-if inline w szablonie html. GenderType: string, gdzie wartość 1 jest dla mężczyzny i 2 dla kobiety.
Próbowałem * ngIf, ale nie działa
<div class="k-form-field">
<span>Gender</span>
<input type="radio" name="gender" id="female" class="k-radio" *ngIf:{{respondent.genderType="1"}} === checked="checked" disabled>
<label class="k-radio-label" for="female">Female</label>
<input type="radio" name="gender" id="male" class="k-radio" disabled>
<label class="k-radio-label" for="male">Male</label>
</div>
Odpowiedzi:
1 dla odpowiedzi № 1Zakładając, że genderType 1 to kobieta, a 2 to samiec,musisz tylko powiązać to z zaznaczonym atrybutem. Nie potrzebujesz ngIf .NgIf to wyświetlanie lub ukrywanie elementu html. Spróbuj tego (usunąłem także atrybut disabled):
<div class="k-form-field">
<span>Gender</span>
<input type="radio" name="gender" id="female" class="k-radio" [attr.checked]="respondent.genderType === "1" ? "checked" : null">
<label class="k-radio-label" for="female">Female</label>
<input type="radio" name="gender" id="male" class="k-radio" [attr.checked]="respondent.genderType === "2" ? "checked" : null">
<label class="k-radio-label" for="male">Male</label>
</div>
1 dla odpowiedzi nr 2
Nie musisz ngIf, aby zmienić wartość z nieruchomości. Możesz użyć bloku javascript dla atrybutu warunkowego:
<input
type="radio"
name="gender"
id="female"
[attr.checked]="respondent.genderType=="1" ? "checked" : null" />
Inną opcją jest użycie formularzy w "sposób kątowy", albo z ngModel lub z Reaktywne formy.
0 dla odpowiedzi № 3
ostateczna odpowiedź, która działa dla mnie
<div class="k-form-field">
<span>Gender</span>
<input type="radio" name="gender" id="female" class="k-radio" [attr.checked] ="respondent.genderType=="2" ? "checked" : null" disabled>
<label class="k-radio-label" for="female">Female</label>
<input type="radio" name="gender" id="male" class="k-radio" [attr.checked] ="respondent.genderType=="1" ? "checked" : null" disabled>
<label class="k-radio-label" for="male">Male</label>
</div>