Angular2 - Afficher/Cacher l'article sur la sélection de bouton radio

J'ai pour afficher ou masquer les sections basées sur la sélection du bouton radio 

 <input name="options"  [(ngModel)]="options" type="radio" [value]="true" [checked]="options==true"/> Yes

    <input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="options==false"/> No</label>

<div>
      <h2 ng-show="options == 'true'">Supply</h2>
      <h2 ng-show="options == 'false'">Demand</h2>
</div>

Si l'utilisateur clique sur Oui, alors nous devons faire preuve de "l'Offre" et masquer la "Demande"
Si l'utilisateur clique sur Non, puis de montrer que la "Demande" et de cacher de l'Offre".

Mais maintenant, lors du chargement du formulaire lui-même à la fois l'Offre et de la Demande est l'affichage sur l'écran.

  • Angulaire 2 n'a pas ng-show directive, l'utilisation *ngIf au lieu de cela,
  • ou utilisez [hidden]="!les options" sur l'offre / [hidden]="options" à la demande
  • Je vous remercie. Il fonctionne
  • et si je veux laisser une option déjà vérifié? Comment puis-je faire?
InformationsquelleAutor Jan69 | 2017-07-24
  1. 19

    Angulaire qui peut être atteint avec *ngIf:

     <input name="options"  [(ngModel)]="options" type="radio" [value]="true" [checked]="options"/> Yes

 <input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="!options"/> No

 <h2 *ngIf="options">Supply</h2>
 <h2 *ngIf="!options">Demand</h2>

    Et pas besoin de vérifier si option==true ou false, [checked]="options" et [checked]="!options" faire de même.

    InformationsquelleAutor Vega
  2. 2
    <div>
            <div class="radio">
                <label><input type="radio" [(ngModel)]="model.prop" name="prop" value="A">A</label>
            </div>
            <div class="radio">
                <label><input type="radio" [(ngModel)]="model.prop" name="prop" value="B">B</label>
            </div>
            <div class="radio">
                <label><input type="radio" [(ngModel)]="model.prop" name="prop" value="C">C</label>
            </div>
    </div>

<div *ngIf="model.prop === 'A'">A</div>
<div *ngIf="model.prop === 'B'">B</div>
<div *ngIf="model.prop === 'C'">C</div>

    si vous voulez présélectionner la valeur type type

     model.prop = 'A';

    dans votre .fichier ts

    InformationsquelleAutor Girish