在Angular 5中，点击事件不正常工作

Question

我有一张屏幕截图，我已经在HTML/CSS中复制了它。

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

现在，我已在我的Angular组件中使用了fiddle中提到的代码。我在代码中使用的Angular组件片段如下所示：

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>

Typescript：

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

问题陈述：

上述的示例代码运行良好，但当我在我的Angular组件中使用它时，文本更改需要双击才能生效，而在示例代码中只需要单击即可。

我不确定如何在Angular中创建示例代码，否则我可以更容易地展示实际情况。

我想知道需要对上述代码进行哪些更改，以便文本更改只需要单击即可生效。

- flash

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

当然可以使用一种方法来优化文本。
演示

- Vega

---

我尝试了一下。我认为这是一种更好的方式，因为文本会在单击彩色框时更改，但似乎“盒子中的文本在点击时似乎变成了奇怪的形状”。文本确实在单击时发生了更改，但文本形状变化很快。 - flash

你的意思是当你快速点击多次时，会出现背景阴影？ - Vega

是的，你说对了。当我点击多次时，可以看到一些背景阴影。 - flash

是的，这是鼠标选择效果（双击文本时出现蓝色背景以便复制）。请查看演示和其CSS文件。 - Vega

[class.white]="!filled" 应该可以解决它 :) - Vega

Answer 2

那个实现与Angular完全不同。

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

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

在你的 TypeScript 文件中，

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 教程，以更熟悉该框架。

- Anjil Dhamala

---

我会尝试按照您的逻辑来做。我想知道为什么在我的上面的代码中，文本更改发生在双击时，而在fiddle上它完美地工作。 - flash