Je rencontre des difficultés dans le développement de l'interface utilisateur angulaire. Ici, j'ai une exigence que:
J'ai essayé cela en utilisant la syntaxe du modèle Angular 2 et en déclarant des valeurs booléennes imbriquées, mais je n'obtiens pas la réponse parfaite.
Comment faire cela dans Angular 2 ou 4? Dois-je utiliser un récepteur hôte ou un émetteur d'événements pour cela? Je partage mon exemple de code et mon plunker:
template.html
<button(click)="addParameter=addParameter==true?false:true">
Add</button>
<div class="Parameters" *ngIf="addParameter==true">
<input name="hello">
<button (click)="hideForm();">Cancel</button>
</div>
test.ts
export class App {
private addParameter:boolean=false;
}
Vous pouvez le faire de plusieurs manières. Selon que vous souhaitez le gérer en composant ou en modèle. Personnellement, je préfère garder le modèle propre et faire le "travail" dans le composant. Donc, dans ce cas, votre code ressemblerait simplement à ceci:
<button *ngIf="!addParameter" (click)="toggleForm()">Add</button>
<div class="Parameters" *ngIf="addParameter">
<input name="hello">
<button (click)="toggleForm()">Cancel</button>
</div>
et TS:
toggleForm() {
this.addParameter = !this.addParameter
}
DÉMO: http://plnkr.co/edit/y3bDxsXMTYLtf8HI2PlA?p=preview
et comme dit, si vous voulez faire cela dans un modèle, cela ressemblerait à ceci:
<button *ngIf="!addParameter" (click)="addParameter = !addParameter">Add</button>
<div class="Parameters" *ngIf="addParameter">
<input name="hello">
<button (click)="addParameter = !addParameter">Cancel</button>
</div>
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots