如何使用 TS 的渲染功能使 HTML-inputs 在我的网站上可见？

Question

当我向数组提交一个新的 Person 并将其显示在 table 行时，我一直在尝试让我的 renderUserList 工作。为了测试它是否从一开始就渲染，我从一开始就在数组中添加了第一个人。当我控制台记录数组和 renderfunction 本身时，它们似乎可以工作。当我“提交”某些内容时，数组会增加并且网站会重新呈现。然而，无论我做什么，我的页面仍然是空的，只有数组似乎按预期实际工作，但我的 html dom 丝毫没有改变。

class Person {
    public Firstname: string;
    public Lastname: string;
    constructor(Firstname: string, Lastname: string) {
        this.Firstname = Firstname;
        this.Lastname = Lastname;
    }
}

let people: Person[] = [
    new Person("Peter", "Parker")]

document.addEventListener("DOMContentLoaded", () => {
    renderUserList(people);

    document.getElementById("add-user").addEventListener("submit", (event) => {
        event.preventDefault();

        const FormField: HTMLFormElement = document.getElementById("add-person") as
            HTMLFormElement
        const FirstNameInput: HTMLInputElement = document.getElementById("Firstname") as
            HTMLInputElement;
        const LastNameInput: HTMLInputElement = document.getElementById("Lastname") as
            HTMLInputElement;
        const FName: string = FirstNameInput.value;
        const LName: string = LastNameInput.value;
        if (FName && LName) {
            people.push(new Person(FName, LName));
            renderUserList(people);
            FormField.reset();
        }
    })

    function renderUserList(userlist: Person[]): void {
        const peoplelist: HTMLElement = document.getElementById("peoplelist")
        for (let i: number = 0; i < userlist.length; i++) {
            peoplelist.innerHTML = "";
            `<tr>
        <td class="p-3 table-font">${people[i].Firstname}</td>
        <td class="p-3 table-font">${people[i].Lastname}</td>
        <td>
            <button class="btn tablebutton delete-button list-button" data-idx="${i}"><i class="fas fa-trash-alt"></i></button>]
            <button type="button" class="btn tablebutton edit-button list-button" data-bs-toggle="modal" data-bs-target="#ModalWindow" data-idx="${i}"><i class="fas fa-user-edit"></i></button>
        </td>
    </tr>`;
        }
    }
})

Answer 1

这可能是一个错字？在包含 <tr> 标记的模板字符串正上方有一行 peoplelist.innerHTML = "";。我敢打赌，像下面这样的东西是有意的。

function renderUserList(userlist: Person[]): void {
  const peoplelist: HTMLElement = document.getElementById("peoplelist");
  for (let i: number = 0; i < userlist.length; i++) {
    peoplelist.innerHTML = `<tr>
        <td class="p-3 table-font">${people[i].Firstname}</td>
        <td class="p-3 table-font">${people[i].Lastname}</td>
        <td>
            <button class="btn tablebutton delete-button list-button" data-idx="${i}"><i class="fas fa-trash-alt"></i></button>]
            <button type="button" class="btn tablebutton edit-button list-button" data-bs-toggle="modal" data-bs-target="#ModalWindow" data-idx="${i}"><i class="fas fa-user-edit"></i></button>
        </td>
    </tr>`;
  }
}

不过还是有点问题，因为循环中的 innerHTML 赋值会替换之前的内容，最后只渲染最后一个人。您可能会在 for 循环中构建标记，然后立即将所有行分配给 peoplelist.innerHTML — 或者甚至可能会研究 DOM 操作的其他方式，例如 insertAdjacentHTML.

此外，顺便说一句，在将用户输入呈现为标记时，最好牢记可能出现的安全问题。如果有人输入代码作为他们的名字怎么办？您能否将您不信任的部分呈现为纯文本（例如 textContent）？

如何使用 TS 的渲染功能使 HTML-inputs 在我的网站上可见？

How to make HTML-inputs visible on my site with the render-function using TS?

html

arrays

typescript

renderer