angular - 如何使用 localStore 保存表中的对象，这些对象被另一个表中的复选框填充并稍后加载数据和复选框状态？

Question

我有一个包含 2 个表的组件：1）favouriteProjects 2）项目

图片链接

该项目将从我的 .html 发送到我的 ts 文件，并将添加到 favArray。如果我下次单击星号，该项目将从收藏夹表中删除。

如何将选中的星星和项目保存在 localStorage 的 favouriteTable 中，如果我关闭浏览器并重新打开，星星仍然会被选中并且项目仍然在最喜欢的表中？

我之前尝试了很多，我也可以在单击星号后将文件存储在 localStorage 中。但是在重新加载项目后，这些项目被加载到我的 favouriteTable 并显示出来，但我的问题是：

• 星星仍然没有被检查
• 在检查了哪个项目仍然在 favouriteTable 中的星之后，星被检查了，但没有发生任何事情，或者我编写了代码，该项目在最喜欢的列表中是双倍的。

所以主要问题不是如何在localStorage中保存和加载东西，而是如何在加载侧面后检查星号，检查星号，项目在表中，取消选中星号后从这个最喜欢的表中删除在第一次单击时使项目加倍或什么也没有发生。我希望你知道我的问题是什么，对于长文本：D

HTML：

//favouriteTable (left side):
...
<table id="favouriteTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let favourite of favouriteProjects; let projectIndex=index;">
                            <td (click)="navigateTo(favourite.id)">
                                <span>
                                    {{favourite.id}}
                                </span>
                            </td>
                            <td (click)="navigateTo(favourite.id)">
                                <span>
                                    {{favourite.title}}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
...
//projectTable (right side)
...
<tr *ngFor="let project of projects">
    <td>
        <span id="checkbox">
             <input id="checkbox-element" type="checkbox"  value={{project}} 
             (click)="addItemToFav(project)"/>
             <i [ngClass]="project['isFavourite'] ? 'fa fa-star' : 'fa fa-star-o'"></i>
        </span>
    </td>
</tr>
...

...
export class ProjectComponent implements OnInit {
private projects: Project[] = [];
private favouriteProjects: any[] = [];
}
...

addItemToFav(e) {
        e.fav = !e.fav;
        if (!e.fav) {
          this.favouriteProjects.pop();

        } else {
          this.favouriteProjects.push(Object.assign({}, e));

        }
        e['isFavourite'] = !e['isFavourite'];
      }
...

标签： angularcheckboxhtml-tableonclicklocal-storage