Angular 按钮上的点击事件只有点击两次才会触发

Question

我目前正在 angular 中创建应用程序。我正在研究的模块使您能够加入或创建房间。

房间模块初始ui： https://gyazo.com/81afe2b5f7119326d00b518fc4e0979f

单击“加入房间”按钮后，我们将进入加入 ui： https://gyazo.com/0728a182b27a143fcefd9d71d0c33c44

单击“加入”按钮后，出现以下错误：

ERROR DOMException: An attempt was made to use an object that is not, or is no longer, usable

然而，一旦我第二次点击加入按钮，我就能够连接到 websocket 服务器并且没有任何问题

我认为这与使用 *ngIf 和 dom 未正确加载有关 HTML 的主要代码是：

<button *ngIf="isEnterRoomShown" id="createRoomBtn" mat-raised-button (click)="createRoom()">Create Room</button>
  <button *ngIf="isEnterRoomShown" id="joinSessionBtn" mat-raised-button (click)="joinRoom()">Join room</button>
  <div [hidden]="isEnterRoomShown">
    <button  id="join" mat-raised-button (click)="join()">Join</button>
  </div>

和组件：

  createRoom() {
    const name = this.nameInput.nativeElement.value;
    this.websocket = this.wsService.initWebsocket();
    const wsData = {
      message: "create-room",
      name,
    };
    this.rService.username = name;
    if (this.websocket.readyState === 0) { }

    this.waitForSocketConnection(this.websocket, () => {
      this.websocket.send(JSON.stringify(wsData));
    });
  }

  joinRoom() {
    this.isEnterRoomShown = !this.isEnterRoomShown;
  }

  join() {
    if (!this.websocket) {
      this.websocket = this.wsService.initWebsocket();
    }

    const name = this.nameInput.nativeElement.value;

    this.rService.username = name;

    if (this.websocket) {
      this.websocket.send(
        JSON.stringify({
          message: "join-room",
          name,
          id: this.roomId.nativeElement.value,
        })
      );
    }

    this.outRoom = false;

    this.sessionId = this.roomId.nativeElement.value;
  }

我对 Whosebug 和 angular 开发还是很陌生，如果您需要任何额外说明，请告诉我。我试图在 Whosebug 上搜索类似的问题，但没有找到答案。

Answer 1

好像是你的代码

this.outRoom = false;
this.sessionId = this.roomId.nativeElement.value;

即使您的“websocket.send”命令未结束也会执行，因为它是异步的。我不知道该怎么做，但您应该添加如下内容：

if (this.websocket) {
    this.websocket.send(
        JSON.stringify({
            message: "join-room",
            name,
            id: this.roomId.nativeElement.value,
        })
    ).then(() => {
        this.outRoom = false;
        this.sessionId = this.roomId.nativeElement.value;
    });
}

Answer 2

当您使用 ngIf 时，它会创建和销毁 HTML DOM 元素。所以在这种情况下，不要使用 ngIf，而是使用 hidden directive

[hidden]="!isEnterRoomShown"

这应该可以防止节点被破坏。

Angular 按钮上的点击事件只有点击两次才会触发

Angular click event on button wont fire until clicked twice

javascript

frontend

dom

angular