Angular 12 - 显示类型错误：无法读取 Html 元素的未定义属性（读取“peersContainer”）

Question

视频通话.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>

视频通话.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()

}

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

---

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