TypeScript匹配游戏：如何获取屏幕显示的图片？

Let’s walk through the most likely reasons your console.log is returning undefined and how to fix them:

• DOM Element Timing in Angular
  Angular’s ngOnInit runs before the component’s view is fully rendered. If you’re using document.getElementById('wrapper') here, the wrapper element might not exist yet, leading to undefined when you try to access its images.
  Fix: Switch to ngAfterViewInit (which runs after the view is initialized) or use Angular’s ViewChild to safely reference elements. Example:

  import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html'
  })
  export class DashboardComponent implements AfterViewInit {
    @ViewChild('wrapper') wrapper!: ElementRef;
  
    ngAfterViewInit(): void {
      const wrapperElement = this.wrapper.nativeElement;
      const images = wrapperElement.querySelectorAll('img');
      console.log('Images:', images); // Should now log the image elements
    }
  }
  

  Don’t forget to add a template reference to your wrapper in the HTML: <div #wrapper>...</div>

• Variable Scope Issues
  If your img or images[] variables are declared inside a nested function, loop, or conditional block, they won’t be accessible outside that scope. Double-check where you’re declaring these variables—make sure they’re in the same scope as your console.log statement.
  Example of a scope mistake:

  ngOnInit() {
    if (someCondition) {
      const images = document.querySelectorAll('#wrapper img'); // Only accessible inside this if block
    }
    console.log(images); // Undefined!
  }
  

  Fix: Declare the variable outside the block if you need to access it later.

• Dynamic Image Loading
  If you’re setting image src attributes dynamically (e.g., from an API or random array), the image elements might exist but their src hasn’t been set yet, or the image hasn’t finished loading. To log the image once it’s ready, use the onload event:

  const img = document.createElement('img');
  img.src = 'path/to/face.jpg';
  img.onload = () => {
    console.log('Loaded image:', img); // Logs the fully loaded image
  };
  wrapper.appendChild(img);
  

• Incorrect Selectors
  Double-check that your selector is targeting the right elements. For example, if your images have a specific class, use document.querySelectorAll('#wrapper .face-image') instead of a generic selector. Also, confirm the wrapper ID is correctly spelled in both your HTML and TypeScript.

• TypeScript Type Annotations
  In mixed TS/JS apps, missing type annotations can sometimes lead to unexpected behavior. Add types to your variables to catch issues early:

  const images: NodeListOf<HTMLImageElement> = document.querySelectorAll('#wrapper img');
  

These steps should help you track down why your variables are returning undefined and get your matching game’s image detection working correctly.

内容的提问来源于stack exchange，提问作者Katie Kennedy