Тип 'HTMLCollectionOf ‹HTMLCanvasElement›' должен иметь метод '[Symbol.iterator] ()', который возвращает итератор.

Я создаю массив с

const myCanvas = documen.getElementsByTagName('canvas')

что это действительно работает. Он возвращает мне что-то вроде этого:

images: [
0: canvas,
1: canvas,
2: canvas
]

Это для проекта Typescript, я хочу повторить этот массив и преобразовать каждое изображение, чтобы зарегистрировать его.

Нравится:

for (const image of myCanvas) {
      console.log(canvas.toDataURL());
    }

(Я не использую foreach, потому что он не работает с типом HTMLCollectionOf)

Мне нужно повторить HTMLCollection, которую мне возвращает getElementsByTagName. Результатом будет Тип "HTMLCollectionOf" должен иметь метод "Symbol.iterator", который возвращает итератор.

error


typescript for-of-loop
person Jgascona    schedule 23.08.2019    source источник

Ответы (4)


arrow_upward
15
arrow_downward

Чтобы выполнить итерацию таким образом, вам нужно установить compilerOptions следующим образом:

"compilerOptions": {
        // ...
        "target": "ES6",
        "lib": [
            "DOM",
            "DOM.Iterable",
            "ES6"
        ]
        // ...
    }
person Lessneek    schedule 21.02.2020
comment
Если вы используете VS Code, вам может потребоваться перезапустить среду IDE, чтобы настройки вступили в силу. - person Josh Habdas; 24.06.2020
comment
Спасибо, мне также пришлось перезапустить мой слушатель сборки в реальном времени wp-scripts, вы также можете заменить ES6 на esnext - person redanimalwar; 19.11.2020

arrow_upward
5
arrow_downward

У меня есть это в моем tsconfig.json:

"compilerOptions": {
        // ...
        "target": "es2015",
        "module": "es2020",
        "lib": [
          "es2018",
          "dom"
        ]
        // ...
    }

Я добавляю dom.Iterable к lib, и вывод пропадает. Теперь это выглядит так:

"compilerOptions": {
          // ...
          "target": "es2015",
          "module": "es2020",
          "lib": [
            "es2018",
            "dom",
            "dom.Iterable"
          ]
          // ...
        }
person Ilija Iličić    schedule 24.12.2020

arrow_upward
2
arrow_downward

Может быть стоит проверить версию Машинопись / определений, , потому что я не получаю ошибки < / а>. Я считаю, что ошибки связаны с некоторыми старыми браузерами, которые на самом деле не поддерживают итерацию коллекции HTML, поэтому вы можете использовать традиционный цикл for.

Оба примера показаны ниже:

const myCanvas: HTMLCollectionOf<HTMLCanvasElement> = document.getElementsByTagName('canvas');

for (const image of myCanvas) {
  console.log(image.toDataURL());
}

for (let i = 0; i < myCanvas.length; i++) {
  console.log(myCanvas[i].toDataURL());
}
person Fenton    schedule 23.08.2019
comment
Что ж, теперь он работает, на самом деле он работал и раньше, но с ошибкой компилятора. Не думаю, что это зависит от браузера, потому что я использую хром. Спасибо, Фентон! - person Jgascona; 23.08.2019

arrow_upward
0
arrow_downward

Вы можете использовать for-of так:

const menus = document.getElementsByClassName('navbar-menu');
for (const menusKey of Object.keys(menus)) {
  console.log(menus[menusKey]);
}
person AnasSafi    schedule 23.03.2021