/ / jak powiązać wstępnie wypełnione dane z obiektu do przycisku radiowego w Angular 5 - angleular, angle-ng-if

jak powiązać wstępnie wypełnione dane z obiektu do przycisku radiowego w Angular 5 - angleular, angle-ng-if

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 № 1

Zakł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>