Question

我有这个功能：

public hideOtherQuestions() {
    const questionContainers = document.getElementsByClassName('question-container');

    let questionContainer: Element;
    for (let questionContainer in questionContainers) {
        if (!questionContainer.classList.contains('visible')) {
            document.getElementsByClassName('question-container')[0].setAttribute('style', 'display: none');
        }
    }
}

questionsContainer是元素的HTMLCollection。在for loop let questionContainer定义为string。

因此我收到if <{1}}上.classList不存在的string语句的错误

如何将for循环中let的类型从string更改为Element？

Answer 1

您想使用of代替in。

in指的是key字符串
of指的是您的对象value

因此，采取以下步骤：

将您的收藏品包裹在Array.from()
将for从in更改为of

然后你应该得到你期待的结果

public hideOtherQuestions() {
    const questionContainers = Array.from(document.getElementsByClassName('question-container'));

    let questionContainer: Element;
    for (let questionContainer of questionContainers) {
        if (!questionContainer.classList.contains('visible')) {
            document.getElementsByClassName('question-container')[0].setAttribute('style', 'display: none');
        }
    }
}

否则你会想要在循环中设置val，如下所示：

for (let key in questionContainers) {
  let questionContainer = questionContainers[key]
}

Answer 2

在这样的循环中使用in关键字将提取您正在迭代的对象的键，不值。对象的键是字符串，因此在指出错误时，Typescript是正确的。

由于它是HTMLCollection，而不是正确的数组，因此您也无法使用for / of循环。因此，您将陷入旧式索引循环：

for (let i = 0; i < questionContainers.length; i++) {
    const questionContainer = questionContainers.item(i)
    if (!questionContainer.classList.contains('visible')) {
        document.getElementsByClassName('question-container')[0].setAttribute('style', 'display: none');
    }
}

或者，如果您想使用for / of循环，您可以使用Array.from方法将集合转换为真实数组：

for (let questionContainer of Array.from(questionContainers)) {
    if (!questionContainer.classList.contains('visible')) {
        document.getElementsByClassName('question-container')[0].setAttribute('style', 'display: none');
    }
}

在for循环中定义类型

2 个答案: