点击事件在 Angular 5 中无法正常工作

Posted 2023-03-13

【中文标题】点击事件在 Angular 5 中无法正常工作

【英文标题】：on click events not working properly in Angular 5

【发布时间】：2018-09-22 23:06:31

【问题描述】：

我在下面有一个截图，我用 html/CSS 复制了它。

我为上面的截图创建了fiddle。小提琴的工作方式是当我点击等待文本的项目时，它会变为收到文本的项目，反之亦然。

现在，我在我的角度组件中使用了小提琴中提到的代码。我在代码中使用的角度组件的sn-ps如下所示：

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>

打字稿：

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);
);

问题陈述：

上面的小提琴工作得很好但是当我在我的角度组件中使用它时，文本更改发生在双击但在小提琴中它发生在单击一次。

我不知道如何在角度上做出小提琴，否则我更容易准确地展示发生了什么。

我想知道我需要在上面的代码中进行哪些更改，以便单击一次即可更改文本。

【参考方案1】：

如果没有 jquery，我对此的看法是这样的：

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

当然可以用方法优化文本。DEMO

【讨论】：

我试过了。我认为这是一种更好的方法，因为点击彩色框时文本会发生变化，但它看起来像the text in the box seems to be making wierd shape on click。文本更改确实发生在单击一次，但文本形状变化迅速。

你的意思是快速点击多次，有背景阴影？

是的，你明白了。当我多次点击时，我可以看到一些背景阴影。

是的，它是鼠标选择效果（双击文本时的蓝色背景以便您可以复制）。查看演示及其 css 文件

[class.white]="!filled" 应该照顾好它 :)

【参考方案2】：

该实现尽可能远离角度。

做这样的事情：我要添加一些伪代码。

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

在您的打字稿文件中，

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.

当您使用它时，我建议您查看 Angular 教程以更熟悉该框架。

【讨论】：

我会尽量按照你的逻辑。我想知道为什么在我上面的代码中，文本更改发生在双击时，因为它在小提琴上工作得很好。