悬停时显示文字/点击写入 HTML Table

Question

我已经 HTML table 连接到组件字段 gameArray 我会：

当用户的光标位于 TD 上方（:hover）并且它在 gameArray 中的模拟字段为空字符串时显示 'H'，
单击后填写 gameArray 字段。

我已经编写了代码，它在 Firefox 中运行良好，但在 Chrome 中存在一些问题。问题是：当我点击第 0 列或第 1 列时，下一列将显示 'H'.

很高兴看到您的建议。问候！

工作应用示例：

https://angular-idfr1g.stackblitz.io

app.component.html

    <hello name="{{ name }}"></hello>
      <table>
        <tr *ngFor='let row of gameArray; let i = index'>
          <td *ngFor='let column of gameArray[i]; let j = index'
              (click)="selectFieldHandler(i, j)"          
              appHoverDirective>{{ gameArray[i][j] }}</td>
        </tr>
      </table>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  gameArray = [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
  ];

  selectFieldHandler(row: number, col: number): void{
    this.gameArray[row][col] = "clicked";
  }
}

hover-directive.ts

import { Directive, ElementRef, HostListener, OnInit } from '@angular/core';

@Directive({
  selector: '[appHoverDirective]'
})
export class HoverDirective implements OnInit {

  markToDisplay: string = 'H';
  currentElement;

  constructor(
    private _element: ElementRef
  ){}

  ngOnInit(): void {}

  @HostListener('mouseenter') onMouseEnter() {
    if ( this._element.nativeElement.textContent === "" ) {
      this.currentElement = this._element.nativeElement;
      this._element.nativeElement.style.color = '#00274a96';
      this._element.nativeElement.textContent = this.markToDisplay;
    }
  }

  @HostListener('mouseleave') onMouseLeave() {
    if ( this._element.nativeElement === this.currentElement ) {
      this._element.nativeElement.textContent = '';
    }
  }

}

Answer 1

更改内容可能会干扰模型绑定。

尝试改变你的游戏阵列。如果您想更新样式，您的指令只会触发一个事件并添加 class。

此外，如果您不想在游戏数组中放置临时数据，您可以使用 class 样式也可以使用 :before 伪元素 class插入 'H' 字符。

.hover-class:hover{
  color: #00274a96; // This makes no sense, colors are three or six hex digits
}
.hover-class:hover:before{
  content:"H";
}

Answer 2

解决方案：

我需要在点击后清除指令中的 td textContent。

  @HostListener('click') onMouseClick() {
    if ( this._element.nativeElement === this.currentElement ) {
      this._element.nativeElement.textContent = '';
    }
  }

悬停时显示文字/点击写入 HTML Table

Show text on hover / click to write into HTML Table

html

javascript

typescript

angularjs-directive

angular