错误TS2339：类型“ HTMLElement”上不存在属性“ imageID”

Question

Trying to use the global variable imageID to get the value of getImage, but keep getting error " Property 'imageID' does not exist on type 'HTMLElement'." . Want to assign the HTMLELement to global variable imageID . Is there any way to parse the variable to a string or something? Any suggestions would be appreciated.

dashboard.component.ts

 import {Component,Input,OnChanges,OnInit,SimpleChanges} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Emotion} from 'emotion';
import {EmotionService} from 'emotion.service';



@Component({
    selector: 'dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
    emotions: Emotion[] = [];
    emotion: string;
    imageID: any;
    constructor(private emotionService: EmotionService) {}

    ngOnInit() {
        this.getEmotions();
       // this.makeMatch();

        //function to randomize and get face images
        var w = document.getElementById('wrapper');
        var button = document.getElementById('randomize');
        var images = w.children; // inner elements, your image divs
        // a function to hide all divs
        var hideDivs = function(imgs: HTMLCollection) {
            for (var img of < any > imgs) {
                (img as HTMLElement).style.display = 'none';
            } //for
        } //hideDivs

        hideDivs(images); // hide all initially

        button.addEventListener('click', function(event) {
            console.log('');
            console.log('%c=============================', "color: blue");
            console.log('%c In getFaces method', "color: blue", );
            var rnd = Math.floor(Math.random() * images.length); // get random index
            hideDivs(images); // hide all images

            (images[rnd] as HTMLElement).style.display = 'block'; // show random image
            (event.target as HTMLElement).textContent = 'Click one more time!';
            var getImage = (images[rnd] as HTMLElement);


                    //where error occurs
           this.imageID = getImage.id;


            // this.imageID as HTMLElement = images[rnd].getAttribute('alt');
              console.log('%c Image ID for match making: ', imageID );
            console.log('%cImage ID: ', "font-weight: bold", getImage.id);
           // console.log('%cAll image data:', "font-weight: bold", images[rnd]);
            console.log('%c=============================', "color: blue");
            console.log('');

        }) //button

Answer 1

The error occurs because this === button in your code

button.addEventListener('click', function(event) {
       ...
       this.imageID = getImage.id;
       ...
    })

if you want to write imageID as a global variable just use window

window.imageID = getImage.id;

if you want to write imageID to class instance attribute use bind

button.addEventListener('click', function(event) {
       ...
       this.imageID = getImage.id;
       ...
    }.bind(this))

or arrow function

button.addEventListener('click',(event) => {
       ...
       this.imageID = getImage.id;
       ...
    })