Angular项目在Local主机上工作，但在GitHub页面上不工作

Question

我正在Angular中列出一个待办事项清单，还可以节省和还原刷新，然后在Local主机上添加到列表中 并且该项目在“添加”按钮下方显示。在github页面上，当我单击时，添加它无济于事。

github repo

github页面

这是我从控制台中获得的错误：

ERROR TypeError: Cannot read properties of null (reading 'push')
    at e.addTodo (main.2beb7ccacdd609b1.js:1:139904)
    at main.2beb7ccacdd609b1.js:1:140617
    at Qh (main.2beb7ccacdd609b1.js:1:60440)
    at i (main.2beb7ccacdd609b1.js:1:60625)
    at HTMLFormElement.<anonymous> (main.2beb7ccacdd609b1.js:1:107043)
    at v.invokeTask (polyfills.a66b249bad4eb06b.js:1:7168)
    at Object.onInvokeTask (main.2beb7ccacdd609b1.js:1:82284)
    at v.invokeTask (polyfills.a66b249bad4eb06b.js:1:7089)
    at M.runTask (polyfills.a66b249bad4eb06b.js:1:2563)
    at m.invokeTask [as invoke] (polyfills.a66b249bad4eb06b.js:1:8219)

Answer 1

问题问题

不是来自GitHub页面。它来自角度代码本身。

该代码除了一件事外，该代码运行良好。在浏览器中首次访问Angular应用程序时， todos 键从未在该域中的 localstorage 中设置为（github页面或localhost）。因此， getTodos（）函数返回null，从而使 this.todos 在 ngoninit（）中初始化语句要设置为null。

解决问题的解决方案

，将if-null Operator（ ?? ）添加到 getTodos（）的返回中，以包含一个空数组（ [] ）。这样，如果是首次访问，或者用户播放并清除了 localstorage ，则该应用程序仍应工作（鉴于将新的Todos推到空数组中）。

因此，更改 todos.component.ts 从

return JSON.parse(localStorage.getItem("todos")!);

to

return JSON.parse(localStorage.getItem("todos")!) ?? [];