angular *ngFor 找不到数组答案

【问题标题】：angular *ngFor doesnt find arrayangular *ngFor 找不到数组
【发布时间】：2023-01-13 18:41:49
【问题描述】：

我用我的本地存储条目制作了一个数组，并试图让 ngFor 迭代它们。大多以错误Property 'characters' does not exist on type 'CharactersChecklistComponent'. 6 <div *ngFor=" let character of characters"> Hello</div> 结尾提前感谢您的回答:)

界面： export interface Icharacters{ name: string; naxxramas25?: boolean; naxxramas10?: boolean; os10?: boolean; os25?: boolean; eoe10?: boolean; eoe25?: boolean; ulduar10?: boolean; ulduar25?: boolean; }

从存储功能中获取所有项目：

`  allStorage() {
    var values = [],
        keys = Object.keys(localStorage),
        i = keys.length;
    while ( i-- ) {
        let tempValue:any = localStorage.getItem(keys[i])
        let tempParsedValue = JSON.parse(tempValue)
        values.push(tempParsedValue);
    }
    console.log(values)
    return values;
  }`

在 component.ts 中获取字符列表：

`  ngOnInit(): void {
    var characters = this.CharacterfunctionService.allStorage()
    /* console.log(characters) */
    console.log(Array.isArray(characters))
    /* characters = characters as Icharacters[] */
    console.log(characters)
    }`

组件 html：

`<div *ngFor=" let character of characters"> Hello</div>`

尝试使用和不使用接口实现，但并没有真正实现任何值得提及的东西

【问题讨论】：

标签： angular local-storage ngfor

【解决方案1】：

如果您在 ngOnInit() 中声明变量，则无法从组件的 HTML 访问 characters。你将不得不做这样的事情：

characters = [];

ngOnInit(): void {
  this.characters = this.CharacterfunctionService.allStorage();
}`

【讨论】：