Angular 12 - 显示 TypeError：无法读取 Html 元素的未定义属性（读取“peersContainer”）答案

【问题标题】：Angular 12 - Showing TypeError: Cannot read properties of undefined (reading 'peersContainer') for Html ElementAngular 12 - 显示 TypeError：无法读取 Html 元素的未定义属性（读取“peersContainer”）
【发布时间】：2022-01-25 13:22:27
【问题描述】：

videocall.html

<form id="join" onsubmit="fun()">
    <h2>Join Room</h2>
    <div class="input-container">
        <input id="name" type="text" name="username" placeholder="Your name" />
    </div>
    <div class="input-container">
        <input id="token" type="text" name="token" placeholder="Auth token" />
    </div>
    <button type="button" class="btn-primary" id="join-btn" (click)="fun()">Join</button>
</form>
<div id="conference" class="conference-section">
    <h2>Conference</h2>

    <div #peersContainer id="peersContainer">Nobody in the Room</div>
</div>

videocall.ts

import {
  HMSReactiveStore,
  selectPeers
} from "@100mslive/hms-video-store";

const hms = new HMSReactiveStore();
//hms.triggerOnSubscribe();
const hmsStore = hms.getStore();
const hmsActions = hms.getHMSActions();
@Component({
  selector: 'app-video-call-room',
  templateUrl: './video-call-room.component.html',
  styleUrls: ['./video-call-room.component.css']
})
export class VideoCallRoomComponent implements OnInit,AfterViewInit {
  peers = hmsStore.getState(selectPeers);
  constructor() {
  }
  
  ngOnInit(): void {
    //window.onunload = this.leaveRoom;
  }
  ngAfterViewInit(): void {
    this.peers = hmsStore.getState(selectPeers);
    hmsStore.subscribe(this.renderPeers, selectPeers);
    
  }
  fun() : any{
    console.log("clicked");
    hmsActions.join({
      userName: "nikita",
      authToken: "mytoken"
    });
    console.log("joined");
  }
  leaveRoom() {
    hmsActions.leave();
  }
  @ViewChild("peersContainer",{ static: false }) peersContainer!: ElementRef<any>;
// helper function to create html elements
  h(tag:any, attrs:any, ...children:any[]) {
    const newElement = document.createElement(tag);

    Object.keys(attrs).forEach((key) => {
      newElement.setAttribute(key, attrs[key]);
    });
    children.forEach((child) => {
      newElement.append(child);
    });
    return newElement;
  }
  renderPeers(peers:any[]) {
    
      // 1. clear the peersContainer
    if (!peers) {
      peers = hmsStore.getState(selectPeers);
    }
    
    this.peersContainer.nativeElement.innerHTML="";
    // 2. loop through the peers and render a tile for each peer
    peers.forEach((peer) => {
      const video = this.h("video", {
        class: "peer-video",
        autoplay: true,
        muted: true,
        playsinline: true,
      });

      hmsActions.attachVideo(peer.videoTrack, video);

      const peerContainer = this.h(
        "div",
        {
          class: "peer-container"
        },
        video,
        this.h(
          "div",
          {
            class: "peer-name"
          },
          peer.name
        )
      );
     this.peersContainer.nativeElement.appendChild(peerContainer);     
    });
  }    //end of renderPeers()

}

它正在创建会话并且用户能够加入（它显示在仪表板中并且相机正在开启）。但是，它无法在 peersContainer div 中添加 html。也尝试使用render2。但同样的错误仍然存在。资源 - https://docs.100ms.live/javascript/v2/guides/javascript-quickstart

【问题讨论】：

这是this.peersContainer.nativeElement.innerHTML=""; 行显示错误吗？
@AlanYu 是这一行。
将hmsStore.subscribe(this.renderPeers, selectPeers);替换为hmsStore.subscribe(this.renderPeers.bind(this), selectPeers);通知.bind(this)
@AlanYu 是的，它奏效了。它将内容附加到 peersComponent 但在控制台中显示“typeError: Cannot read properties of undefined (reading 'videoTrack')”。你能看到任何其他问题吗？

标签： angular typescript

【解决方案1】：

您正在通过 ngAfterViewInit 访问 peersContainer，这很好...

我不知道会不会是这样，但是... 你能不能试着把 peersContainer 移到构造函数之前？

类似：

...
export class VideoCallRoomComponent implements OnInit,AfterViewInit {
   @ViewChild("peersContainer",{ static: false }) peersContainer!: ElementRef<any>;
  peers = hmsStore.getState(selectPeers);

  constructor() {
  }
...

如果这不起作用，请尝试通过以下两种方式进行更改：

一）

@ViewChild("peersContainer",{ static: true}) peersContainer!: ElementRef<any>;

@ViewChild('peersContainer') peersContainer!: ElementRef<any>;

【讨论】：