Les événements de type "on click" ne fonctionnent pas correctement dans Angular 5

Question

J'ai une capture d'écran ci-dessous que j'ai reproduite en HTML/CSS.

J'ai créé le violon pour la capture d'écran ci-dessus. Le violon fonctionne de manière à ce que lorsque je clique sur le texte des articles en attente, il se transforme en texte des articles reçus et vice-versa. .

Maintenant, j'ai utilisé le code mentionné dans le fiddle dans mon composant angulaire. Le site extraits du composant angulaire que j'ai utilisé dans mon code est présenté ci-dessous :

HTML :

<tr>
   <td class="left">Fred Doe's Guest 1</td>
   <td class="number1">250</td>
   <td class="table1">2</td>
   <td class="right-itemswaiting" (click)="textChange()">
      <div class="fold" data-filled="true">
         <div class="square white"></div>
         <span class="items-text">Items Waiting</span>
      </div>
   </td>
</tr>

Dactylographié :

export class AdminManageAttendeesComponent implements OnInit 
{
constructor() { }
ngOnInit() {
}

textChange(){    
$(document).on('click', '.fold', function(e) {
var filled = !($(this).data('filled'));
$(this).data('filled', filled);
$(this).find(".items-text").text(filled ? "Items Waiting" : "Items Received");
$(this).find(".square").toggleClass("white", filled);
});
}
}

Énoncé du problème :

Le bidule ci-dessus fonctionne parfaitement bien mais lorsque je l'ai utilisé dans mon composant angulaire, le changement de texte se produit lors d'un double-clic. mais dans le fiddle cela se produit sur un seul clic.

Je ne suis pas sûr de savoir comment faire du fiddle en angular, sinon il me serait plus facile de montrer ce qui se passe exactement.

Je me demande quelles modifications je dois apporter à mon code ci-dessus pour que le changement de texte se fasse en un seul clic.

Answer 1

Mon point de vue sur ce sujet, sans jquery, serait le suivant :

   <td class="right-itemswaiting" (click)="filled=!filled">
      <div class="fold" data-filled="true">
         <div class="square" [class.white]="!filled"></div>
         <span #text class="items-text">{{this.filled ?'Items Received': 'Items Waiting'}}</span>
      </div>
   </td>

Le texte peut être optimisé avec une méthode, bien sûr.
DEMO

Answer 2

Cette implémentation est aussi éloignée d'Angular que possible.

Faites quelque chose comme ça : Je vais ajouter un peu de pseudo-code.

<checkbox [(ngModel)]="isReceived" (ngModelChange)="someFun()"></checkbox>
<label> {{isReceived ? 'Items Received' : 'Items Waiting'}}</label>

dans votre fichier typographique,

isReceived: boolean;

constructor() {
   this.isReceived = initializeLogic() || false;
}

initializeLogic(): boolean {
    //if you want to initialize it any other way.
}

someFun() {
//do any other logic (not UI) associated with model change.
}

Pendant que vous y êtes, je vous suggère de consulter le tutoriel angular pour vous familiariser avec le framework.