Gibt es eine effizientere Art zu verwenden * ngIf bedingte

Ich habe ja/nein Radio-Tasten, die ich die Werte lesen, von denen in einem JSON-Objekt gespeichert sind. Zuerst überprüfe ich, ob das Json-Objekt leer ist oder ob das Feld für die Optionsfelder null ist. In diesem Fall zeige ich beide Optionsfelder nicht aktiviert an. Als nächstes prüfe ich, ob der wahre Wert für das Feld im json-Objekt angezeigt wird, und wenn ja, überprüfe das Optionsfeld Ja und überprüfe dann ebenfalls den falschen Wert und überprüfe das Optionsfeld Nein. Es sieht so aus, als ob ich viel gleichen oder ähnlichen Code in der Ansicht verwende und ich frage mich, ob es einen effizienteren Weg gibt, dies zu tun. So sieht mein Code aus. Vielen Dank.Gibt es eine effizientere Art zu verwenden * ngIf bedingte

  <!-- json array will be empty when first coming to page, display no boxes checked --> 
      <div *ngIf="(questions | json) === '{}' || questions.partYear == null"> 
       <input type="radio" id="yesRadio" formControlName="partYear" name="partYear" value="yes" [(ngModel)]="questions.partYear">Yes<br/> 
       <input type="radio" id="noRadio" formControlName="partYear" name="partYear" value="no" [(ngModel)]="questions.partYear">No 
      </div> 

      <!-- user comes back to page, populate box that was checked during sesssion --> 
      <div *ngIf="questions?.partYear === 'yes' || questions?.partYear === true"> 
       <input type="radio" id="yesRadio" formControlName="partYear" name="partYear" value="yes" checked [(ngModel)]="questions.partYear">Yes 
      </div> 
      <div *ngIf="questions?.partYear === 'no' || questions?.partYear === false"> 
       <input type="radio" id="yesRadio" formControlName="partYear" name="partYear" value="yes" [(ngModel)]="questions.partYear">Yes 
      </div> 

      <div *ngIf="questions?.partYear === 'yes' || questions?.partYear === true"> 
       <input type="radio" id="noRadio" formControlName="partYear" name="partYear" value="no" [(ngModel)]="questions.partYear">No 
      </div> 
      <div *ngIf="questions?.partYear === 'no' || questions?.partYear === false "> 
       <input type="radio" id="noRadio" formControlName="partYear" name="partYear" value="no" checked [(ngModel)]="questions.partYear">No 
      </div>

Quelle

2017-02-13 Rich

Sie vielleicht einen Blick auf [dieser Einführung] nehmen wollen (https://juristr.com/blog/2016/11/ng2-binding-radiobutton-lists/) zu Radiobuttons in Angular. Der erste Schritt, den ich tun würde, um Ihren Code zu verbessern, ist, Radio-Button 1 & 3 in ein Div und 2 & 4 in ein anderes zu verschieben, da sie die gleichen '* ngIf'-Bedingungen zu haben scheinen. –

können Sie ngSwitch verwenden –

Sie sollten in der Lage sein, etwas wie diese zu tun und die Notwendigkeit für alle * ngIf-Anweisungen zu negieren.

<div> 
    <input type="radio" id="yesRadio" formControlName="partYear" name="partYear" [checked]="questions?.partYear === 'yes' || questions?.partYear === true" (click)="questions.partYear = 'yes'">Yes<br/> 
    <input type="radio" id="noRadio" formControlName="partYear" name="partYear" [checked]="questions?.partYear === 'no' || questions?.partYear === false" (click)="questions.partYear = 'no'">No 
</div>

Quelle

2017-02-13 14:54:57 domfx

Gibt es eine effizientere Art zu verwenden * ngIf bedingte

Antwort

Verwandte Themen