Question

我已将HTML表与组件字段gameArray连接起来，我会：

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

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

尝试在游戏数组中进行更改。如果您想更新样式，您的指令只会触发一个事件并添加一个类。

此外，如果您不想在游戏数组中放置临时数据，则可以让样式类也使用:before伪元素类来插入'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表

2 个答案: